为什么Firefox渲染虚线边框时会相互错位？

Question

http://betawww.helpcurenow.org/about/financial-accountability/

http://blog.helpcurenow.org/

我在使用一个设计，其中包含许多1像素虚线边框。我注意到Firefox中有一些奇怪的问题。通常情况下，Firefox呈现的所有东西（几乎）与我期望和想要看到的一样。然而，在使用两个相互靠近的虚线边框时，它们会错位。

我的意思是，我有几个对象，每个对象都有一个1像素的底部边框、一个2像素的底部间距，然后下一个对象有一个1像素的顶部边框——基本上创建了双重边框的效果。

在Safari、Chrome和IE中查看这种效果时，“双虚线边框”效果看起来非常好。然而，在Firefox中，这些虚线并不对齐（没有双关语）。

我相信这只是Firefox呈现虚线边框的小故障，但我想知道为什么，如果有人知道的话。

您可以在上述两个网址中看到这种效果。第一个网址有一个侧边栏框，标题使用了这个效果。第二个（我们的博客）在各处都使用这个效果，但最突出的是每篇文章标题，下面的署名也使用了这个效果。

- Joel Glovier

---

这是有意为之的（我猜）。Firefox会计算整个边框（四个方向）的所有内容，然后只绘制其中两个。如果你启用了所有四个边框，你就会明白我的意思。 - Bobby

@Bobby的解释很有道理，可以将其想象成一个“蚂蚁行进”的边框，它们沿着顺时针或逆时针方向从一个角落开始绘制，直到它们再次相遇。另外，如果您仔细观察，在IE中会发现它并不完全覆盖边缘。 - Andy E

是的，所有这些都有道理。我只希望浏览器能够保持一致。但我很难想象那一天会到来。 - Joel Glovier

Answer 1

对于问题中的 "为什么？" 部分，有一个相当简单的解释：w3c没有定义如何绘制边框，因此每个浏览器编写自己独立的实现。Firefox的算法似乎以圆形图案呈现边框，而不是WebKit的对称图案：

┌─ ─ ─ ─ ─ ─ ─ ─ ┐    ┌ ─ ─ ─ ─ ─ ─ ─ ─ ┐
|                ↓    ↓                 ↓
|                |    |                 |
|                |    |                 |
↑                |    |                 |
└ ─ ─ ─ ─ ─ ─ ─ ─┘    └ ─ ─ ─ ─ ─ ─ ─ ─ ┘
     Firefox                WebKit

你会注意到，Internet Explorer 与 Opera/Chrome/Safari 绘制的框不同。在顶部和底部边框的左侧有一个轻微的间隙（尽管这可能可以通过使用 border-collapse 来修复）。

- Andy E