Wieso rendert Firefox gestrichelte Ränder gegeneinander verschoben?

http://betawww.helpcurenow.org/about/financial-accountability/Wieso rendert Firefox gestrichelte Ränder gegeneinander verschoben?

http://blog.helpcurenow.org/

Ich bin mit einem Design, das viele 1px gestrichelte Grenzen enthält. Ich habe etwas merkwürdiges in Firefox bemerkt. Normalerweise rendert Firefox alles (* fast) wie ich es erwarten würde und möchte es sehen. Bei gestrichelten Rändern tritt jedoch ein Fehler auf, wenn Sie zwei gestrichelte Rahmen verwenden, die nahe beieinander liegen.

Was ich meine ist, habe ich mehrere Objekte, die einen 1px unteren Rand haben, einen 2px unteren Rand, und dann das nächste Objekt hat einen 1px oberen Rand - im Grunde schafft die Wirkung einer doppelten Grenze.

Wenn Sie diese Effekte in Safari, Chrome und IE anzeigen, sieht der Effekt "Doppelter gestrichelter Rand" gut aus. In Firefox sind die gestrichelten Linien jedoch nicht ausgerichtet (kein Wortspiel beabsichtigt).

Ich bin mir sicher, dass es nur ein Fehler ist, wie Firefox gestrichelte Grenzen darstellt, aber ich wollte einen Einblick bekommen, warum, wenn jemand weiß.

Sie werden den Effekt in meinen beiden URIs oben sehen. Die erste hat eine Sidebar-Box, in der die Überschrift diesen Effekt verwendet. Der zweite (unser Blog) verwendet diesen Effekt überall, aber am prominentesten werden Sie mit jedem Posttitel sehen, die unten angegebene Zeile verwendet den Effekt ebenfalls.

Quelle

2010-06-10 Joel Glovier

Dies ist von Entwurf (ich denke). Firefox berechnet alles für die * ganze * Grenze (alle vier Seiten) und zeichnet dann nur diese zwei. Wenn Sie alle vier Grenzen aktivieren, werden Sie sehen, was ich meine. – Bobby

@ Bobbys Erklärung macht Sinn, es ist wie eine "marschierende Ameisen" Grenze, die sich nicht bewegt, sie werden von einer Ecke im oder gegen den Uhrzeigersinn gezogen, bis sie sich wieder treffen. P.S. Wenn Sie genau hinschauen, werden Sie im IE sehen, dass es nicht ganz von Kante zu Kante geht. –

Yup, macht das alles Sinn. Ich wünschte nur Browser wären konsistent. Irgendwie fällt es mir schwer, diesen Tag EVER zu sehen. –

Für die „warum?“ Teil der Frage, gibt es eine ziemlich einfache Erklärung: die w3c nicht define, wie die Grenze zu ziehen, so dass jeder Browser ihre eigene, unabhängige Implementierung schreibt. Firefox-Algorithmus erscheint die Grenze in einem kreisförmigen Muster zu machen, wie symmetrisches Muster zu WebKit Gegensatz:

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

Sie werden feststellen, dass Internet Explorer nicht die Box nicht zieht die gleichen wie Opera/Chrome/Safari, auch nicht. Es gibt eine kleine Lücke links neben der Grenze oben und unten (obwohl dies möglicherweise behoben werden kann mit border-collapse).

Quelle

2010-06-10 13:54:11

Wieso rendert Firefox gestrichelte Ränder gegeneinander verschoben?

Antwort

Verwandte Themen