2010-06-10 3 views
10

http://betawww.helpcurenow.org/about/financial-accountability/Pourquoi Firefox rend-il les bordures pointillées désalignées les unes par rapport aux autres?

http://blog.helpcurenow.org/

J'utilise un design qui intègre beaucoup de 1px frontières pointillées. J'ai remarqué quelque chose d'étrange dans Firefox. Normalement Firefox rend tout (* presque) comme je m'y attendais et je veux le voir. Cependant, avec des bordures en pointillés, il apparaît lorsque vous utilisez deux bordures en pointillés proches les unes des autres, elles sont désalignées. Ce que je veux dire, c'est que j'ai plusieurs objets qui ont une bordure inférieure 1px, une marge inférieure 2px, et ensuite l'objet suivant a une bordure supérieure 1px - créant essentiellement l'effet d'une double bordure. Lors de la visualisation de ces effets dans Safari, Chrome et IE, l'effet "double pointillés" est superbe. Cependant, dans Firefox, les lignes pointillées ne s'alignent pas (sans jeu de mots).

Je suis sûr que c'est juste un pépin quant à la façon dont Firefox rend les bordures pointillées, mais je voulais savoir pourquoi, si quelqu'un le sait.

Vous verrez l'effet dans mes deux URI ci-dessus. Le premier a une boîte latérale où le titre utilise cet effet. La deuxième (notre blog) utilise cet effet partout, mais le plus visible, vous verrez à chaque titre de poste, la signature ci-dessous utilise l'effet aussi.

+1

Ceci est par nature (je suppose). Firefox calcule tout pour la bordure * entière * (tous les quatre sites) et puis dessine seulement ce deux. Si vous activez les quatre frontières, vous verrez ce que je veux dire. – Bobby

+2

@ L'explication de Bobby prend tout son sens, imaginez-la comme une bordure de «fourmis marchantes» qui ne bouge pas, elles sont tirées d'un coin dans le sens des aiguilles d'une montre ou dans le sens inverse des aiguilles d'une montre. P.S. Si vous regardez attentivement, dans IE, vous verrez que ce n'est pas tout à fait bord à bord. –

+1

Yup, tout ce qui fait du sens. Je souhaite seulement que les navigateurs soient cohérents. D'une manière ou d'une autre, j'ai de la difficulté à voir ce jour-là. –

Répondre

12

Pour la « pourquoi? » Partie de la question, il y a une explication assez simple: le w3c ne define comment dessiner la frontière, de sorte que chaque navigateur écrit leur propre implémentation indépendante. L'algorithme de Firefox semble rendre la frontière dans un motif circulaire, par opposition à motif symétrique de WebKit:

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

Vous remarquerez que Internet Explorer ne tire pas la boîte même que Opera/Chrome/Safari, que ce soit. Il y a un léger écart à gauche de la bordure en haut et en bas (bien que cela puisse être corrigé avec border-collapse).

Questions connexes