为什么Firefox渲染虚线边框彼此错位？

Question

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

http://blog.helpcurenow.org/

我正在使用一个包含大量1px虚线边框的设计.我注意到Firefox中有些奇怪的东西.通常情况下,Firefox会像我期望的那样呈现所有内容(*差不多),并希望看到它.但是,使用虚线边框时,如果使用彼此接近的两个虚线边框,则会显示它们未对齐.

我的意思是,我有几个对象说1px底部边框,2px底部边距,然后下一个对象有一个1px顶部边框 - 基本上创建双边框的效果.

在Safari,Chrome和IE中查看所述效果时,"双虚线边框"效果看起来很棒.然而在Firefox中,他们的虚线不排队(没有双关语意).

我确定这只是一个关于Firefox如何呈现虚线边界的故障,但我想知道为什么,如果有人知道的原因.

您将在上面的两个URI中看到效果.第一个有一个侧边栏框,标题使用此效果.第二个(我们的博客)全部使用这个效果,但最突出的是你会看到每个帖子标题,下面的副行也使用效果.

Answer 1

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

?? ? ? ? ? ? ? ? ?    ? ? ? ? ? ? ? ? ? ?
|                ?    ?                 ?
|                |    |                 |
|                |    |                 |
?                |    |                 |
? ? ? ? ? ? ? ? ??    ? ? ? ? ? ? ? ? ? ?
     Firefox                WebKit

您会注意到Internet Explorer不会像Opera/Chrome/Safari那样绘制相同的框.在顶部和底部的边界左侧有一个微小的间隙(虽然这可能是固定的border-collapse).