修复 CSS 流体网格中的子像素舍入问题答案

【问题标题】：Fixing Sub-Pixel rounding issue in a CSS Fluid Grid修复 CSS 流体网格中的子像素舍入问题
【发布时间】：2020-10-03 17:43:42
【问题描述】：

我正在尝试创建一个流畅的 CSS 网格，它适用于 Firefox 和 IE8+，但不适用于亚像素舍入问题变得明显的 Safari/Chrome/Opera：

.column {
  float: left;
  width: 25%;
}

主容器的宽度为 100%，如果您在 Safari/Chrome/Opera 中更改浏览器大小，您可以看到圆角宽度不一致。

在广泛阅读该问题后，我了解到亚像素舍入“没有正确或错误的解决方案”，但 Firefox 方式对我来说似乎是最好的折衷方案。（例如，如果我将 4 个 div 设置为 25% 的宽度，我希望覆盖的区域为 100%。）

我想知道是否有我错过的纯 CSS 解决方案，或者一些 JavaScript 来解决问题。

谢谢！

更新：截至 2014 年 5 月，Chrome 33 和 Safari 7 似乎采用了“Firefox 方式”。

【问题讨论】：

几天前我在这里stackoverflow.com/questions/9914209/… 回答了一个类似的问题，虽然它并非以完全相同的宽度结束所有元素，但它可能与没有javascript 的情况一样接近。
感谢您的回答。我想摆脱“行”包装以获得更大的灵活性，我在小提琴中添加了另一个示例，显示拇指画廊而不必包装每一行。

【解决方案1】：

Stubbornella 的 OOCSS 框架（以下链接）网格模块通过为最后一列提供以下覆盖来处理此问题：

float:    none;
overflow: hidden;
width:    auto;

这允许它占据容器内剩余的任何宽度。

【讨论】：

谢谢 Barney，唯一的缺点是 lastUnit 类有点不灵活。
我明白你的意思——我个人认为结构化类名是灵活 HTML 的必要组成部分，但这确实意味着要添加很多。话虽如此，还是可以避免一点如果您愿意放弃对那些不支持高级 CSS 2.1 选择器的浏览器的支持，则可以使用额外的类：将 unit 的引用替换为 .line > * 和 .lastUnit 的 .line > *:last-child。
嘿@gyo，我在这里创建了上面的演示：jsfiddle.net/barney/7Bd8V，然后我更进一步，剥离了除line 类之外的所有内容，对于我们假设的剥离案例所有小数宽度都希望宽度相等：jsfiddle.net/barney/32Q8B
我选择了你的答案，因为精简版的 OOCSS 网格真的启发了我……我想出了这个：jsdo.it/gyopiazza/lMgl
@Cory 可能（在有 10 个项目的情况下） min-width: 10%;会是个好主意吗？无论如何，在 StackOverflow 上创建一个小提琴和一个新问题肯定会得到一些参与......

【解决方案2】：

这很糟糕，没有一个很好的选择可以为每个浏览器向上和向下舍入像素，但我通常会这样做：

.nested:last-child {
    float: right;
}
.nested:first-child {
    float: left;
}

这将使最后一个子元素向右浮动，因此 px 未对齐不明显，但如果它是唯一的元素（例如 33% 宽度的 div），那么它将继续向左浮动。

【讨论】：

与我在这里定义的问题相同：stackoverflow.com/questions/9635347/… 如果元素需要下降到下一行，它会向右浮动。我认为唯一正确的解决方案必须是使用预处理器并为每个元素使用 ceil() 和 floor() （手写笔，但 SCSS 有等价物），并带有供应商前缀以在适当的方向上四舍五入。如果我发现了什么，我会回来报告...