css - 为什么 Firefox 渲染的虚线边框彼此不对齐？

Question

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

http://blog.helpcurenow.org/

我使用的设计包含大量 1 像素的虚线边框。我注意到 Firefox 中有些奇怪。通常 Firefox 呈现一切(*几乎)正如我所期望和想要看到的那样。然而，对于虚线边框，当您使用两个彼此靠近的虚线边框时，它们会出现错位。

我的意思是，我有几个对象有一个 1px 的底部边框，一个 2px 的底部边距，然后下一个对象有一个 1px 的顶部边框 - 基本上创造了双边框的效果。

在 Safari、Chrome 和 IE 中查看上述效果时，“双虚线边框”效果看起来很棒。但是在 Firefox 中，它们的虚线并不对齐(没有双关语意)。

我确信这只是 Firefox 如何呈现虚线边框的一个小故障，但如果有人知道的话，我想深入了解其中的原因。

您将在我上面的两个 URI 中看到效果。第一个有一个侧边栏框，标题使用此效果。第二个(我们的博客)使用了这种效果，但最突出的是你会在每个帖子标题中看到，下面的署名也使用了这种效果。

Answer 1

对于问题的“为什么？”部分，有一个相当简单的解释:w3c 没有 define怎么画边框，所以各个浏览器自己写独立的实现。 Firefox 的算法似乎以圆形图案呈现边框，这与 WebKit 的对称图案相反:

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

您会注意到 Internet Explorer 绘制的方框也与 Opera/Chrome/Safari 不同。顶部和底部的边框左侧都有一个小间隙(尽管这可能可以通过 border-collapse 修复)。