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那样修复它，但你可以从另一边尝试。

为什么你的缺口？由于舍入误差。因此，我们必须确保没有舍入错误。怎么办？首先，我们划分我们拥有的所有空间，然后乘以内部元素，这样我们就会得到父和所有舍入错误发生的情况在这种情况下，孩子们可以。

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。

此外，父母萎缩与孩子扩张的比例必须从你想要分割孩子的部分中选择。你希望它们越精确，父母的宽度就越小，但步骤也会增长。

Answer 2

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

Answer 3

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

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

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

3 个答案: