Ich habe diese Idee für die Bereitstellung von Overlay-CSS als Antwort auf eine andere Frage . Ich hatte nicht daran gedacht, diese Art von Syntax in der Vergangenheit zu verwenden, aber ich kann mir keine Probleme vorstellen, die mit der Verwendung dieser Syntax verbunden sein könnten.
Soweit ich das beurteilen kann, funktioniert das - und wenn es zulässig ist, denke ich, dass es eine innovative Lösung bietet - aber ich sehe es nicht oft.
Könnte mir jemand erklären, warum es schlecht sein könnte?
%Vor%Die Verzweigung basiert auf der Spezifikation für Nicht ersetzte Elemente (ein div ist ein nicht ersetztes Element):
Wenn alle drei "links", "Breite" und " 'richtig' sind 'automatisch': Zuerst irgendeinen setzen 'auto' Werte für 'margin-left' und 'margin-right' auf 0. Dann, wenn die 'direction' -Eigenschaft des Elements Erstellen der statischen Position containing block ist 'ltr' gesetzt 'left' zur statischen Position und wenden Sie Regel an Nummer drei unten; ansonsten, einstellen "richtig" auf die statische Position und Wenden Sie die Regel Nummer eins unten an.
(da alle 3 Eigenschaften nicht automatisch sind, ist die obige Bedingung nicht erfüllt )
Wenn keines der drei 'auto' ist: If sowohl "margin-left" als auch "margin-right" sind 'auto', löse die Gleichung unter die zusätzliche Einschränkung, dass die beiden Ränder erhalten gleiche Werte, außer dies würde sie negativ machen, in denen Fall, wenn die Richtung der enthaltenden block ist 'ltr' ('rtl'), set 'margin-left' ('margin-right') auf Null und löse nach "Marge-rechts" ('Rand-links'). Wenn einer von 'margin-left' oder 'margin-right' ist 'auto', löse die Gleichung dafür Wert. Wenn die Werte sind Überbestimmt, ignoriere den Wert für "links" (falls die "Richtung" Eigenschaft des umschließenden Blocks ist 'rtl') oder 'richtig' (falls 'direction' ist 'ltr') und löse diesen Wert.
(da die Breite automatisch ist, ist die obige Bedingung nicht erfüllt )
Andernfalls setzen Sie 'auto' Werte für "margin-left" und "margin-right" auf 0, und wähle eines der folgenden sechs aus Regeln, die zutreffen.
(die obige Bedingung ist erfüllt )
Und so sind wir mit diesen 6 übrig:
'links' und 'Breite' sind 'automatisch' und 'rechts' ist nicht 'automatisch', dann wird die Breite verkleinert. Dann löse nach 'links'
'left' und 'right' sind 'auto' und 'width' ist nicht 'auto'. Wenn die Eigenschaft 'direction' des Elements, das den statischen Block enthält, 'ltr' gesetzt ist, links 'zur statischen Position, andernfalls' rechts 'in die statische Position. Dann löse nach 'links' (wenn 'Richtung ist' rtl ') oder' rechts '(wenn' Richtung 'ist' ltr ').
'Breite' und 'rechts' sind 'automatisch' und 'links' ist nicht 'automatisch', dann wird die Breite verkleinert. Dann löse nach 'rechts'
'left' ist 'auto', 'width' und 'right' sind nicht 'auto', dann löse nach 'left'
'Breite' ist 'automatisch', 'links' und 'rechts' sind nicht 'automatisch', dann löse nach 'Breite'
'rechts' ist 'auto', 'links' und 'Breite' sind nicht 'automatisch', dann löse nach 'rechts'
Basierend auf den obigen Angaben ist die Breite in diesem Element automatisch und wenn Sie also links und rechts angeben, löst es die Breite, also sollte es gültig sein.
Obwohl es gemäß CSS2.1 / CSS3-Spezifikation vollständig gültig ist, funktioniert es in IE6 nicht. Es funktioniert in IE7, IE8, Firefox 3 und Chrome.
Ihre Lösung funktioniert nicht mit Bildern , iframes und anderen ersetzte Elemente .
Dies liegt daran, dass der CSS-Standard für ersetzte Elemente einen anderen Dimensionsberechnungsmechanismus vorschreibt. (Langweilige Spezifikationen: Ссылка )
Ich denke, die Frage ist, welchen Nutzen es gibt, wenn Sie Ihre Lösung dafür verwenden:
%Vor%Was ist kompatibler und einfacher zu lesen. Obwohl Ihre Lösung eine innovativere Lösung ist, scheint es ein unerwartetes CSS-Verhalten zu sein, die Breite / Höhe eines Elements durch Festlegen der Grenzen festzulegen, und die Browserimplementierung kann sich in Zukunft für diesen Fall ändern.
Tags und Links css css-position