Question

我遇到一个非常简单的HTML标记问题，它在Chrome和Firefox中呈现不同。我想知道其中一个是否是一个错误。

代码简单如下：

<ul>
    <li>
        <img />
    </li>
</ul>

问题是在Chrome中，<li />元素在顶部有一些填充，但前提是其内容是图像。例如没有问题文本。

示例小提琴：https://jsfiddle.net/8c4rujvu/1/

＆＃13;

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

＆＃13;

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

＆＃13;

这是它在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?

为什么会这样？

鉴于其他浏览器对此不同意Chrome，这显然看起来像一个错误，它是。请参阅 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

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

https://jsfiddle.net/9wp619xz/

查看错误详情修复网站中的Google Chrome兼容性错误 - 常见问题解答

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这通常是由于浏览器的默认样式。为了解决这个问题，我建议使用normalize css样式表或为元素添加自己的css。

Answer 4

解决方案是双重的。

将图像设置为display: inline可解决图像上方的空行。这个空行是nasty bug in Chrome。此错误使得在默认列表项中使用/启动非内联元素实际上是不可能的。 如果你问我，那就太大了。
添加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/

Answer 5

这是由这两个浏览器在渲染UL / LI元素时采用的两种不同方法引起的。我认为从一开始就很清楚：）

这里的问题不是内联元素的行为方式！

此处的问题是列表样式属性在这两个浏览器中的行为方式！

如果你注意到，间隙的大小是 18px ，这是chrome中的默认行高！如果您为font-size增加li，则点标记的大小也会增加，因此图像距div的上边缘的距离也会增加。

如果Firefox，该点标记或list-style-type组件充当绝对定位元素，那么任何元素都可以按照预期从li 左上角边缘开始

但在Chrome中，该点标记或list-style-type组件充当内联元素，并且与任何其他内联元素一样，将允许内联/浮动元素与其自身位于同一行。因此，本质上内联的文本开始在点旁边！这也适用于图像，按钮，链接，跨度或任何此类元素！

现在你觉得问题是这些元素完全正常的行为。即使两个元素是浮动的或内联的，如果它们不能进入父级的水平宽度，则后一个元素会下降到下一行！与display：block元素类似，因为它们默认在新行开始！

在您的示例中，图片有display:block，因此它们将始终以新行开头！但即使你删除了那个属性，静止图像也很大，以适应父母，因此它会掉下来＆amp;显示差距。（这仅适用于较小的屏幕，在较大的屏幕上，这对于内联块图像不是问题）

同样，奇怪的是，div在这种情况下会成为内联元素，即使你给出的宽度超过100％！由此我得出结论，如果内容的包装是可能的，那么该元素从新行开始，但如果内容无法包装，那么它将从一个新行开始！

注意：这是基于我的观察和过去的经历！如果有人链接到这个案例的官方文档，请粘贴在这里。此外，欢迎任何改进此答案的建议。

我用更多示例更新了您的JSFiddle：https://jsfiddle.net/8c4rujvu/5/

Answer 6

为您试用此代码HTML

ul li {
display:block;
}

＆＃13;

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

＆＃13;

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

＆＃13;

显示<li> <img/> </li>的不一致

6 个答案: