我有一个非常简单的
HTML标记的问题,这在Chrome和Firefox中呈现不同.我想知道这是否是其中的一个错误.
代码很简单：
<ul>
<li>
<img />
</li>
</ul>
问题在于,在Chrome中,< li />元素在顶部有一些填充,但只有当其内容是图像时.例如,没有问题.文本.
示例小提琴：https://jsfiddle.net/8c4rujvu/1/
img {
display: block;
width: 500px;
}
li {
border: 1px solid #f00;
}
<ul>
<li>
<img src="http://www.w3schools.com/css/trolltunga.jpg">
</li>
<li>
<img src="http://www.w3schools.com/css/trolltunga.jpg">
</li>
<li>Some text</li>
</ul>
这是在Firefox(50.0.2)中显示的方式：
这里似乎是个问题？
解决方法
这是由于display：list-item的默认浏览器/用户代理样式差异.
作为一个修复,您可以使用inline-block和vertical-align：top(或甚至垂直对齐：顶部)来获取常见的行为 – 请参阅下面的演示：
img {
display: inline-block;
vertical-align: top;
width: 500px;
}
li {
border: 1px solid #f00;
}
<ul>
<li>
<img src="http://www.w3schools.com/css/trolltunga.jpg">
</li>
<li>
<img src="http://www.w3schools.com/css/trolltunga.jpg">
</li>
<li>
Some text
</li>
</ul>
你可能想看一个相关的问题：Why alignment mark list is different on WebKit when using :before height?
为什么会这样？
鉴于其他浏览器对此不同意chrome,这显然看起来像一个bug,它是.请参阅Chromium Bug Tracker中记录的这个开放bug：
Table inside list item rendered at wrong position(示例URL：http://jsfiddle.net/P8Ua7/)
Not limited to tables. Putting a flexBox inside a list-item gives the
same result. It also happens if you have replaced content displayed as
block.
OP具有显示为块的图像(这是一个内联替换的元素)！
