javascript - 如何像 Firefox 那样修复子像素错误？

Question

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

编辑:

这是在 Firefox 以外的所有浏览器中产生此问题的另一个示例:http://jsfiddle.net/4aMsx/2/

Answer 1

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

为什么那里有空隙？由于舍入误差。因此，我们必须确保没有舍入错误。怎么做到的？首先，我们将除我们所有的空间，然后乘以内部元素，所以我们会得到父元素和所有元素发生舍入错误的情况在这种情况下， children 会没事的。

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%;
}

您可以在调整窗口或 fiddle 框架的大小时看到它的运行情况。您会注意到包装器的宽度正在逐步变化:这是所有舍入误差所在的位置。

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

此外，父级收缩和子级扩展的比例必须根据您要划分子级的部分来选择。您希望它们越精确，父级的宽度就越小，但步长也会增加。