css – 为什么Firefox渲染虚拟边框彼此不对齐？

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

http://blog.helpcurenow.org/

我正在使用一个包含大量1px虚线边框的设计.我在Firefox中发现了一些奇怪的东西.通常情况下,Firefox可以像我所期望的那样渲染一切(*几乎),并希望看到它.但是,当使用虚线边框时,当您使用两个彼此靠近的虚线边框时,它们会出现错误.

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

当在Safari,Chrome和IE中查看所述效果时,“双虚边框”效果看起来不错.但是在Firefox中,他们的虚线不排队(不是双关语).

我确定这是Firefox如何渲染虚线边界的一个小故障,但是我想知道为什么,如果有人知道.

你会在上面的两个URI中看到效果.第一个有一个侧边栏,其中标题使用此效果.第二个(我们的博客)使用这种效果,但最显着的是你会看到每个帖子标题,下面的下划线也使用效果.

解决方法

为什么？部分问题,有一个很简单的解释：w3c不是 define如何绘制边框,所以每个浏览器都写自己独立的实现. Firefox的算法似乎使得边框呈圆形,与WebKit的对称模式相反：

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

您会注意到Internet Explorer不会将框与Opera / Chrome / Safari相同.顶部和底部边界的左侧有一个微小的差距(尽管这可能会因边框崩溃而固定).