html – 不一致显示>

我有一个非常简单的 HTML 标记的问题,这在Chrome和Firefox中呈现不同.我想知道这是否是其中的一个错误.

代码很简单：@H_403_3@

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

问题在于,在Chrome中,< li />元素在顶部有一些填充,但只有当其内容是图像时.例如,没有问题.文本.@H_403_3@

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

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)中显示的方式：
@H_403_3@

在Chrome(55.0.2883.75 m)中：
@H_403_3@

这里似乎是个问题？@H_403_3@

解决方法

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

作为一个修复,您可以使用inline-block和vertical-align：top(或甚至垂直对齐：顶部)来获取常见的行为 – 请参阅下面的演示：@H_403_3@

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?@H_403_3@

为什么会这样？@H_403_3@

鉴于其他浏览器对此不同意chrome,这显然看起来像一个bug,它是.请参阅Chromium Bug Tracker中记录的这个开放bug：@H_403_3@

Table inside list item rendered at wrong position(示例URL：http://jsfiddle.net/P8Ua7/)@H_403_3@

请参阅错误中的一条评论摘录：@H_403_3@

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.@H_403_3@

OP具有显示为块的图像(这是一个内联替换的元素)！@H_403_3@

这是another bug you may want to check out.@H_403_3@

原文链接：https://www.f2er.com/html/224367.html

html – 不一致显示>

解决方法

猜你在找的HTML相关文章