firefox浏览器bug:无src属性的 img 其高度宽度计算错误 - dongyuwei/blog GitHub Wiki

firefox浏览器bug:无src属性的其高度宽度计算错误

这也会影响到img父容器的高度,宽度计算。使用jquery时,计算其父容器box 的height,$('#box').height();在firefox浏览器下面也是错误的。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
		#box{
			padding: 0;
			margin: 0;
		}
		img{
			/*display: inline-block;*/
		}
    </style>
  </head>
<body>
	<div id='box'>
		<img id='lazyImg' width='100' height='100' style='width:100px;height:100px;'>
	</box>

	<script>
		var img = document.getElementById('lazyImg');
		var box  = document.getElementById('box');
		
		console.log(img.offsetHeight,img.clientHeight);
		console.log(box.offsetHeight,box.clientHeight);
	</script>	
</body>
</html>

要解决这个问题,需要 显式声明 img的display为 inline-block

⚠️ **GitHub.com Fallback** ⚠️