Почему Firefox отображает пунктирные границы, смещенные друг от друга? - PullRequest
Новая
       20

Почему Firefox отображает пунктирные границы, смещенные друг от друга?

10 голосов
/ 10 июня 2010

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

http://blog.helpcurenow.org/

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

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

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

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

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

1 Ответ

12 голосов
/ 10 июня 2010

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

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

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

...