Почему Firefox делает разбитые границы несогласованными друг от друга?

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

http://blog.helpcurenow.org/

Я использую дизайн, который содержит много 1px пунктирных границ. Я заметил что-то странное в Firefox. Обычно Firefox отображает все (* почти), как я ожидал бы, и хочу его увидеть. Однако с пунктирными границами он появляется, когда вы используете две пунктирные границы, которые близки друг к другу, они смещены.

Я имею в виду, что у меня есть несколько объектов, которые говорят нижнюю границу 1px, нижнее поле 2px, а затем следующий объект имеет верхнюю границу 1px - в основном создавая эффект двойной границы.

При просмотре указанных эффектов в Safari, Chrome и IE эффект "двойной пунктирной границы" выглядит великолепно. Однако в Firefox они пунктирные линии не выстраиваются в линию (каламбур не предназначен).

Я уверен, что это просто сбой в том, как Firefox создает пунктирные границы, но я хотел получить представление о том, почему, если кто-то знает.

Вы увидите эффект в моих двух URI выше. Первый имеет боковую панель, в которой заголовок использует этот эффект. Второй (наш блог) использует этот эффект повсюду, но наиболее заметно, что вы увидите с каждым заголовком сообщения, приведенная ниже строка также использует эффект.

Ответ 1

В разделе " почему?" есть довольно простое объяснение: w3c не define как рисовать границу, поэтому каждый браузер пишет свою собственную независимую реализацию. Как представляется, алгоритм Firefox отображает границу в круговом шаблоне, в отличие от симметричного шаблона WebKit:

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

Вы заметите, что Internet Explorer не отображает окно так же, как Opera/Chrome/Safari. Там есть небольшой промежуток слева от границы как сверху, так и снизу (хотя это может быть исправлено с помощью border-collapse).