html – 不一致显示>

前端之家收集整理的这篇文章主要介绍了html – 不一致显示>前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个非常简单的 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)中:

这里似乎是个问题?

解决方法

这是由于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:

@L_404_5@(示例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具有显示为块的图像(这是一个内联替换的元素)!

这是another bug you may want to check out.

猜你在找的HTML相关文章