显示<li> <img rel="nofollow noreferrer" /> </ li>的不一致

Question

我有一个非常简单的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)中的显示方式:

而在Chrome(55.0.2883.75米):

这里似乎有什么问题？

Answer 1

这是由于默认的浏览器/用户代理样式差异所致display: list-item.

作为修复,您可以使用inline-block和vertical-align:top(或甚至只是vertical-align: top)img获得常见行为 - 请参阅下面的演示:

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?

为什么会这样？

鉴于其他浏览器不符合这个铬同意,这显然看起来像一个错误,它是.请参阅Chromium Bug Tracker中记录的此漏洞:

Table inside list item rendered at wrong position(示例网址:http://jsfiddle.net/P8Ua7/)

请参阅错误中的一条评论的摘录:

不限于表格.将flexbox放在list-item中会得到相同的结果.如果您已替换显示为块的内容,也会发生这种情况.

OP有一个显示为块的图像(内联替换元素)!

这是another bug you may want to check out.

Answer 2

试试这个 HTML 代码

ul li {
display:block;
}

ul li {
display:block;
}

img {
  display: block;
  width: 500px;
}

li {
  border: 1px solid #f00;
  display:block;
}