<li><img /></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 m）：

这里似乎有什么问题？

Answer 1

这个问题也可以简单地修复float:left属性，检查这个小提琴

https://jsfiddle.net/9wp619xz/

检查错误详细信息修复网站中的 Google Chrome 兼容性错误 - 常见问题解答

https://www.chromium.org/Home/chromecompatfaq

img {
  float:left;
  width: 500px;
}
li {
  border: 1px solid #f00;
  float:left;
  width:100%;
}

<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>

Answer 2

解决方案有两个。

1. 将图像设置为display: inline 可解决图像上方的空行。这个空行是nasty bug in Chrome。这个错误使得在默认列表项中使用/启动非内联元素实际上是不可能的。 如果你问我，这很重要。

2. 添加vertical-align: top 会将列表标记置于顶部（您可能希望它位于该位置）。这也删除了内联图像下方不需要的空间。列表标记放置和内联元素下方的空白不是错误。这是预期的行为。

这将导致 OP 的以下（简单）解决方法：

img {
  width: 500px;
  vertical-align: top;
  /* display: inline; *//* This is default, thus can be omitted */
}
li {
  border: 1px solid #f00;
}

https://jsfiddle.net/8c4rujvu/3/