CSS "outline" anders Verhalten Verhalten auf Webkit & Gecko

Ich bin an einem experiment & ich fand heraus, dass die "outline" CSS2-Eigenschaft ist nicht implementiert, die auf die gleiche Weise auf Webkit & Gecko

In dem script unten habe ich eine absolute position der div in einem anderen div, sondern schweben in der Außenwelt. Die Gliederung auf Webkit beschreibt die aktuellen übergeordneten div, während auf Gecko, es wird erweitert, um die Abdeckung der Kind-Element.

http://jsfiddle.net/KrCs4/

Bin ich etwas fehlt? Gibt es eine Eigenschaft, die ich brauche, um zu überschreiben, die auf Gecko? oder sollte es gemeldet als bug?

Webkit-Screenshot:

CSS

Firefox-Screenshot:

CSS

EDIT:

Bestätigt zu sein, ein Fehler und hier ist ein workaround: http://jsfiddle.net/7Vfee/ (Sie müssen sicherstellen, dass die übergeordneten positioniert: relative oder absolute für diese Problemumgehung zu arbeiten.

InformationsquelleAutor Elie | 2012-05-19
  1. 17

    Dieses inkonsistente Verhalten von Gecko ist gut bekannt und sehr gut dokumentiert, aber komischerweise nicht bei MDN aber am SitePoint Reference:

    Firefox bis einschließlich version 3.5 zeichnen Sie die Umrisse Umriss um den Inhalt von einem element, das über die Grenzen als um das element der tatsächlichen Abmessungen.

    Diese weiterhin auf allen Versionen von Firefox. Ich sehe nicht ein gangbarer workaround für den es im moment, außer um Sie zu entfernen, Ihre absolut-positioniert div von seinem übergeordneten Element, und platzieren Sie es relativ zu... etwas anderes.

    • Warum hat SitePoint hat mehr Dokumentation als die offiziellen W3C-spec? w3.org/TR/CSS2/ui.html#dynamic-outlines
    • Ho: SitePoint konzentriert sich auf die browser-Kompatibilität und Verhaltensweisen. Es ist nicht die Aufgabe der spec zu definieren, die Umsetzung details.
    • Es ist W3C-job zu definieren, der browser Verhalten, unabhängig von der Implementierung. Soweit ich das beurteilen kann, die Gliederung ist nicht sehr gut definiert, wenn es um Größe geht.
    • Oh, das, was Sie beziehen. Ja, in der Tat, es ist nicht angegeben in da... daher nannte es "inkonsistentes Verhalten" und nicht auf einen offensichtlichen "Fehler".
    • Vielen Dank für den Hinweis. Der Fehler kann hier gefunden werden: bugzilla.mozilla.org/show_bug.cgi?id=480888 und ich aktualisierte meine Frage mit einem workaround.
    • Ja, und es gibt viele Orte in der W3C-Seiten, auf denen er sagt die Skillung ist nicht 100% eindeutig und die Browser unterscheiden sich darin, wie Sie es umsetzen. Ich fühle mich nicht Sie sollten nennen es bugs, sollten Sie rufen Sie die Browser " - einzigartige Persönlichkeiten!

    InformationsquelleAutor BoltClock
  2. 33

    Ich hatte das gleiche Problem, also tauschte ich es aus mithilfe der Gliederung verwenden Sie eine box-shadow:

    box-shadow: 0px 0px 0px 1px #FFF;

    statt

    outline:1px #dcdcdc solid;
    • Später Kommentar, aber ich wollte noch hinzufügen, dass Firefox auch zeichnen Sie einen Umriss um alle :nachdem der Inhalt Hinzugefügt in der CSS. Mit box-shadow wie oben wird das problem lösen. In der Tat, der einzige Grund, warum ich denken kann, für die eigentlich mit überblick für alles, was würde der IE8-support-scheinbar kann es tun, Umriss, aber nicht box-shadow.
    • Ein weiterer Grund für die Verwendung von Kontur ist, weil es bietet eine Möglichkeit zum hinzufügen einer offset.
    • Dies sollte sein markiert als korrigierte Antwort!
    InformationsquelleAutor Rumpleteaser
Schreibe einen Kommentar