设置宽高为0的img标签在主流浏览器中仍占据页面高度问题

这不是浏览器新版本出的bug，是基础CSS渲染规则没踩准：

• img默认是inline行内元素，行内元素默认按文本基线对齐，会给p、g这类伸到基线下面的字母预留显示空间
• 就算你把img的宽高都设成0，行内布局的这个预留空间逻辑还是生效，自然就会在元素位置撑出一小段空白，就是你看到的底部白条
• 之前这么写没出问题，基本是之前页面的全局样式刚好重置了相关属性——比如全局给img设了块级显示、改了对齐方式，或者父级设了0行高，刚好把这个空白消掉了，不是以前浏览器渲染逻辑不一样。

除了你已经测过可用的display: none，还有几个方案都不影响跟踪像素的资源加载，可以按需选：

• 给img加display: block，转成块级元素就不受行内基线对齐规则影响，0宽高的块级元素不会占额外空间
• 给img加vertical-align: bottom/top/middle，不用默认的基线对齐，就不会产生下行预留的空白
• 给img的父元素加line-height: 0; font-size: 0，把行内文本的预留空间压到0，也能消掉空白

提示：纯埋点场景用display: none完全没问题，是业内跟踪像素的常规写法，只要你的埋点逻辑不需要读取这个img的布局尺寸就不会有影响。

你贴的测试用例里只全局重置了margin和padding，没碰line-height、元素display、vertical-align这几个相关属性：

• 红色的.main块设了100vh刚好占满视口
• 后面的0宽高img按默认行内规则渲染，撑出的空白就出现在页面底部，和你描述的白条现象完全匹配
• 你测试的Chrome 103、Firefox 102、Safari 15这几个版本的渲染都是符合W3C标准的，不存在兼容性bug。

内容的提问来源于stack exchange，提问作者Brett East