宽度为 25% 的四个节点不适合彼此相邻？

Posted 2023-03-05

【中文标题】宽度为 25% 的四个节点不适合彼此相邻？

【英文标题】：Four nodes with a width of 25% don't fit next to each other?

【发布时间】：2010-09-25 22:41:48

【问题描述】：

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

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

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

【参考方案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 整除。但如果这是一个流动的布局，那不是一个选择。

【讨论】：

谢谢，我确实找到了一些记录问题的材料。而且似乎还没有真正的解决方案：s 此外，Opera 忽略小数百分比的事实使其更加困难。我喜欢我的歌剧，但这真的很糟糕。

【参考方案2】：

您可能只想根据浏览器加载不同的样式表。您可以在标头中使用一些 javascript 来做到这一点。

【讨论】：

我发现网站开始要求 JS 处理琐碎的事情是一个可悲的趋势。我可以在没有 JS 的情况下有条件地加载它们。这确实是一个解决方案。不是最好的，但可以作为最后的手段。

【参考方案3】：

这取决于使用的舍入算法。如果您有许多像素可以被 4 整除，那么您就不会有问题，因为不存在舍入问题。如果你没有那个，那么有时你会得到太多的像素，因为宽度被四舍五入了。

总宽度：800
25% 宽度：200
四个 25% 的区块：800

总宽度：799
25% 宽度：199.75
四个并排的块：796 或 800

800 宽度对 799 宽度的窗口将下拉。

【讨论】：

百分比的整个概念是流畅的布局。所以限制我的宽度会使百分比变得多余。