固定 div 中的图像 - 有趣的 Firefox 行为

Posted 2023-03-06

【中文标题】固定 div 中的图像 - 有趣的 Firefox 行为

【英文标题】：Image in fixed div - Interesting Firefox behavior

【发布时间】：2012-04-09 04:25:12

【问题描述】：

考虑以下示例：(live demo here)

html：

<div class="board">
  <div class="row">
    <div class="cell blue"></div><div class="cell"><img src="http://i44.tinypic.com/25sa9z4.png" /></div><div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div><div class="cell"></div><div class="cell"></div>
  </div>
</div>

CSS：

.cell 
  width: 16px;
  height: 16px;
  display: inline-block;

.blue.cell 
  background-color: blue;

.row 
  height: 16px;
  background-color: #aaa;

.board 
  width: 48px;

在 Chrome 17 和 Safari 5.1.4 中，蓝色单元格位于第一行，正如预期的那样。 但是，在 Firefox 11.0 中，蓝色单元格位于第二行！

为什么会有这种差异？如何使这一致？

【问题讨论】：

看起来是浏览器兼容性问题

请看我的回答，如果我落后了，请告诉我。

那么你的蓝框应该在哪里？请告诉我。正如我在 chrome 中看到的小提琴一样，在此基础上我更新了小提琴。你有什么要求。

看看我更新的小提琴，这次我不认为蓝色框应该在左上角；

还可以查看 css，这次的答案符合您的期望和通用性。

【参考方案1】：

查看小提琴和演示：

小提琴：http://jsfiddle.net/cSWnb/12/

演示：http://jsfiddle.net/cSWnb/12/embedded/result/

更新小提琴：

小提琴：http://jsfiddle.net/cSWnb/23/

演示：http://jsfiddle.net/cSWnb/23/embedded/result/

.cell 
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align:top;

.blue.cell 
    background-color: blue;

.row 
    height: 16px;
    background-color: #aaa;

.board 
    width: 48px;

见下图：

浆果图像的高度超过了单元格的高度，因此 FF 出现了渲染问题。这是浏览器兼容性问题，chrome 和 safari 是基于 webkit 的浏览器，因此它们的呈现方式相似。默认情况下，FF 中的元素不是 Vertical-align:top;所以我们必须设置 css 属性以使元素与浏览器兼容。

【讨论】：

它没有解释为什么 Firefox 呈现不同的方式。此外，您假设蓝色单元格应位于左上角，这是不正确的。

那么你的蓝框应该在哪里？请告诉我。

它可以在第一行的任何位置。解决方案必须是通用的。

对于每个浏览器中的预期行为，请参阅我更新的小提琴。这是一个通用的解决方案。

这是一个有趣的解决方法，但您的答案中仍然缺少对这种浏览器差异的解释。

【参考方案2】：

不是第二个单元格是蓝色的，而是第一个单元格是蓝色的。区别在于定位。

在 Safari 和 Chrome 中，单元格在顶部对齐，因为 WebKit 知道两个元素不能占据相同的空间并重新设置其他一些元素的样式以获得正确的输出这就是为什么 WebKit 是最好的 .在 Firefox 中，单元格被推到底部，因为图像与基线对齐。所以看起来第二个单元格是蓝色的，但实际上第一个单元格是。

尝试将img 上的vertical-align 设置为top，您会看到与顶部对齐的单元格，第一个单元格为蓝色。 http://jsfiddle.net/cSWnb/21/

【讨论】：

呃...两个元素绝对可以占据 CSS 中的“相同空间”。是的，图像和 inline-block 在同一行，并且默认情况下都与基线对齐，因此它们的基线应该对齐。 WebKit 只是让这个布局完全错误，除非它有 UA 样式在 img 元素上设置非默认对齐方式。