css - 宽度为 25% 的四个节点不能并排放置？

Question

我有一个头节点，其中有四个子节点。没有边框、填充或边距。他们四个都有 width:25%; CSS 规则。在 Opera 中，它工作得很好，在 IE 中，最后一个 block 有时会根据窗口的宽度翻转到下一行。

我可以通过给一个 block 设置 24.8% 的宽度来解决这个问题，但 Opera 将其解释为 24%，因此在 block 的末尾留下了 1% 的宽阔间隙。

我该如何解决这个问题？最后一个 block 错过右边的一个像素是可以的。

Answer 1

http://ejohn.org/blog/sub-pixel-problems-in-css/

不幸的是，这是 CSS 世界中的一个众所周知的问题。可能的问题是这些适合的 100% 像素等效是奇数，因此在计算像素时存在舍入误差。

通常我通过使用 IE 特定的选择器来解决这个问题。 Rob 建议使用特定于浏览器的样式表，但我总是发现这种行为很难维护，而且它需要从浏览器加载额外的 HTTP。我也讨厌 CSS hack，但你可以在声明适当的宽度后尝试著名的#width:24.9%(例如 width:25%; #width:24.9%; )。希望如果 IE 在未来的版本中修复了这个 hack，它也会与舍入问题一起出现。

此外，如果您知道父元素的像素宽度，您只需确保它可以被 4 整除。但如果这是一个流动布局，那不是一个选项。