1px 边框显示在 chrome 上答案

【问题标题】：1px border showing on chrome1px 边框显示在 chrome 上
【发布时间】：2013-02-17 19:41:01
【问题描述】：

在页脚之前的底部，有许多框，每个框内都显示一个数字。在 google chrome 中，“+”和“6”在右边框上有一条 1px 的小线。

所有这些框在语义上与其他没有此 1px 行的框相同，并且此问题仅限于 chrome 和 firefox

我不确定它为什么被渲染以及如何摆脱它。

有什么想法吗？

【问题讨论】：

【解决方案1】：

这不是边界。这是因为后面的元素（悬停时显示）比前面的元素宽 1px。您应该尝试将这两个元素都设置为width: 106px。

事实上，如果您将浏览器窗口的大小调整为大约 760 像素宽，您会注意到红色突出部分远大于 1 像素。

【讨论】：

前面的元素是3000px宽，比整个站点上的任何元素都宽...为什么“1px边框”会不一致并显示在所有框中？ *我知道这不是边界 - 但我是这样描述的
不，不是。我的浏览器窗口是 1657px 宽。移向有问题的元素： html:1657px;正文：1657px； .container:1657px; .row.push:1000px; .twelvecol.last:790px; .fact.twocol：107 像素。现在，愿意解释一下否决票吗？
@JezenThomas：我投了反对票，因为我建议使用固定宽度的解决方案来实现完全流畅的布局。
@randomguy 伟大的贡献。您是否在较小的视口大小下测试了该站点？正确的答案明明是改变结构，但你真的认为这个答案在问题的范围内吗？

【解决方案2】：

底层洋红色框的奇怪行为是因为：

在1140.css 第 27 行

.row .twocol {
    width: 13.44%;
}

将width 值更改为13.48% 似乎可以解决此问题。

关于如果视口足够小就会变得可见的边框：

如果不是故意的，一个简单的解决方法是在此处更改 margin-right：

在styles.css 第 452 行

.lense {
    ...
    margin-right: -15px;
    ...
}

致-20px

【讨论】：