如何像 Firefox 那样修复亚像素错误？答案

【问题标题】：How to fix the sub-pixel error the way Firefox does?如何像 Firefox 那样修复亚像素错误？
【发布时间】：2011-11-18 11:23:51
【问题描述】：

如果您打开此页面https://bug63336.bugzilla.mozilla.org/attachment.cgi?id=114574 并尝试调整浏览器窗口的大小，您应该会在除 Firefox 之外的任何浏览器中看到黑框上的线条。这是由于亚像素错误，浏览器以不同的方式处理它。 Firefox 以这样一种方式对子像素进行四舍五入，以至于您应该在该黑框上看不到任何线条，但其他浏览器，即 Opera、Safari、IE 和 Chrome，不修复子像素问题。所以，我想学习一些方法（例如 JavaScript 方法），我可以像 Firefox 那样对子像素进行舍入来修复子像素错误。

编辑：

这里还有一个在除 Firefox 之外的所有浏览器中产生此问题的示例：http://jsfiddle.net/4aMsx/2/

【问题讨论】：

是的，IE8 看起来不错，但 IE7 确实会产生错误。

标签： javascript css firefox

【解决方案1】：

我不太确定这是否会有所帮助。但它值得一试。看看这个网站。 CSS Browser Selector。他们使用 CSS 和 javascript 来针对特定问题的浏览器。

【讨论】：

CSS 在以下情况没有帮助并且孩子们也应该相应地调整大小。结果，每个孩子必须有大约 66.67 的宽度，这会产生相同的子像素误差。
在父 div 中尝试让子级使用百分比而不是像素。例如：parent = 300px, child1 =width:33%, child2= width:33% child3 =width:33%;
这只是问题的一个例子，我正在寻找 Firefox 用来解决问题的算法，所以它不是关于 %，真的。不过还是谢谢你的建议。

【解决方案2】：

我不知道 FF 是如何解决这个问题的，但是在所有浏览器中添加 CSS 样式 border: 1px solid black; 到 #wrapper div CSS 样式规则可以解决这个问题：Chrome、IE7、Opera、Safari。

#wrapper div {
  position: absolute;
  background: black;
  border: 1px solid black;
  width: 20%;
  height: 20%;
}

【讨论】：

【解决方案3】：

你无法像 Fx 那样修复它，但你可以从另一边尝试。

为什么会有空隙？因为舍入误差。因此，我们必须确保没有舍入误差。怎么会这样？一开始，我们会除我们拥有的所有空间，然后乘内部元素，所以我们会得到在父元素和所有元素上发生舍入错误的情况在这种情况下，孩子们会没事的。

有一个来自 bugzilla 的固定示例：http://jsfiddle.net/2tmjw/

我添加了具有以下样式的包装器：

#wrapper4wrapper {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 8%;
    height: 8%;
}

并将原来的包装改为

#wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 1000%;
    height: 1000%;
}

您可以在调整窗口或小提琴框架的大小时看到它的实际效果。您会注意到包装器的宽度是逐步变化的：它是所有舍入误差所在。

如果您仍希望页面居中，您可以尝试以下操作：http://jsfiddle.net/2tmjw/1/ — 但使用绝对定位时，很难将其理想地置于中心位置。但是当它不是绝对定位并且需要水平定位时，可以使用display: inline-block 和text-align: center 或display: block 和margin: auto。

此外，必须从要划分子项的部分中选择父项缩小和子项展开的比例。您希望它们越精确，父级的宽度就越小，但步数也会增加。

【讨论】：