为什么Firefox渲染虚线边框彼此不对齐？ [英] Why does Firefox render dashed borders misaligned from each other?

问题描述

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

http://blog.helpcurenow.org/

我使用的设计包含大量的1px虚线边框。我在Firefox中发现了一些奇怪的东西。通常Firefox渲染一切（*几乎），我会期望和想看到它。但是使用虚线边框时，会出现当你使用两个接近的虚线边框，它们是不对齐的。

I'm using a design that incorporates lots of 1px dashed borders. I noticed something odd in Firefox. Normally Firefox renders everything (*almost) as I would expect and want to see it. However with dashed borders, it appears when you use two dashed borders that are close to each other, they are misaligned.

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

What I mean is, I have several objects that have say a 1px bottom border, a 2px bottom margin, and then the next object has a 1px top border - basically creating the effect of a double border.

当查看所述效果在Safari，Chrome和IE中，双虚线边框效果看起来不错。但是在Firefox中，他们的虚线不排列（不是双关语）。

When viewing said effects in Safari, Chrome, and IE, the "double dashed border" effect looks great. However in Firefox, they dashed lines do not line up (no pun intended).

我相信这只是一个关于Firefox如何渲染虚线边框的问题，想了解为什么，如果有人知道。

I'm sure it's just a glitch as to how Firefox renders dashed borders, but I wanted to get some insight as to why, if anybody knows.

你会看到我的两个URI的效果。第一个有一个侧边栏框，标题使用此效果。第二个（我们的博客）使用这个效果，但最显着的是，你会看到每个帖子标题，下面的线也使用效果。

You'll see the effect in my two URIs above. The first has a sidebar box where the heading uses this effect. The second (our blog) uses this effect all over, but most prominently you'll see with each post title, the byline below uses the effect also.

推荐答案

对于问题的为什么？部分，有一个相当简单的解释：w3c不 define 如何绘制边框，因此每个浏览器都会编写自己的独立实现。 Firefox的算法似乎是以圆形模式渲染边框，而不是WebKit的对称模式：

For the "why?" part of the question, there's a fairly simple explanation: the w3c doesn't define how to draw the border, so each browser writes their own independent implementation. Firefox's algorithm appears to render the border in a circular pattern, as opposed to WebKit's symmetrical pattern:

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

您会注意到，Internet Explorer不会绘制与Opera / Chrome / Safari相同的框。在顶部和底部的边界左边有一个小的间隙（虽然这可以通过 border-collapse 修复）。

You will notice that Internet Explorer doesn't draw the box the same as Opera/Chrome/Safari, either. There's a slight gap to the left of the border on both the top and the bottom (although this might be fixable with border-collapse).

这篇关于为什么Firefox渲染虚线边框彼此不对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！