http://betawww.helpcurenow.org/about/financial-accountability/
我正在使用一个包含大量1px虚线边框的设计.我在Firefox中发现了一些奇怪的东西.通常情况下,Firefox可以像我所期望的那样渲染一切(*几乎),并希望看到它.但是,当使用虚线边框时,当您使用两个彼此靠近的虚线边框时,它们会出现错误.
我的意思是,我有几个对象说一个1px的底部边框,一个2px的底部边距,然后下一个对象有一个1px的顶部边框 – 基本上创建双边框的效果.
当在Safari,Chrome和IE中查看所述效果时,“双虚边框”效果看起来不错.但是在Firefox中,他们的虚线不排队(不是双关语).
我确定这是Firefox如何渲染虚线边界的一个小故障,但是我想知道为什么,如果有人知道.
你会在上面的两个URI中看到效果.第一个有一个侧边栏,其中标题使用此效果.第二个(我们的博客)使用这种效果,但最显着的是你会看到每个帖子标题,下面的下划线也使用效果.
解决方法
为什么？部分问题,有一个很简单的解释：w3c不是
define如何绘制边框,所以每个浏览器都写自己独立的实现. Firefox的算法似乎使得边框呈圆形,与WebKit的对称模式相反：
┌─ ─ ─ ─ ─ ─ ─ ─ ┐ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ┐
| ↓ ↓ ↓
| | | |
| | | |
↑ | | |
└ ─ ─ ─ ─ ─ ─ ─ ─┘ └ ─ ─ ─ ─ ─ ─ ─ ─ ┘
Firefox WebKit
您会注意到Internet Explorer不会将框与Opera / Chrome / Safari相同.顶部和底部边界的左侧有一个微小的差距(尽管这可能会因边框崩溃而固定).
