Niquelao » Blog-Archiv » Speicherplatzprobleme und Pseudo

» Archiv des Weblogs » Platzprobleme und Pseudo-Elemente Niquelao - CSS Platzprobleme und Pseudo-Elemente 7. September 2006 von Maroto Es ist schon merkwürdig, einen Bug dieser Art zu entdecken, also eine verdammte Kleinigkeit, bei der man entweder nichts Besseres zu tun hat oder es purer Zufall ist, dass man überhaupt darauf stößt.

Und dann auch noch so spät. Darüber wurde bereits vor mehr als einem Jahr auf Maxgeek , Satzansatz und sicherlich auch anderswo geschrieben. Kommen wir zum Thema. Was ist eigentlich los?

Wenn wir die in der CSS 2.1 -Spezifikation definierten Pseudo-Elemente :first-letter und :first-line verwenden (das Pseudo-Element :first-child und ähnliche lassen wir außen vor, da unser Freund IE davon wenig hält), müssen wir feststellen, dass wir manchmal nicht die erwarteten Ergebnisse erzielen. Was ist das Problem? Unverständlicherweise macht IE Fehler bei der Interpretation der CSS -Syntax.

Wenn wir unmittelbar nach diesen Pseudo-Elementen die geschweifte Klammer ( { ) verwenden, um unsere Deklaration zu beginnen, ohne ein Leerzeichen dazwischen zu lassen, interpretiert IE dies nicht. Sie können dies im ersten Beispiel sehen. p:first-line { color: blue; font-weight: bold; } Dasselbe geschieht, wenn wir versuchen, gemeinsame Eigenschaften für mehrere Elemente in einer einzigen Deklaration anzugeben, wobei diese durch Kommas ( , ) getrennt sind. Sie können dies im zweiten Beispiel sehen. p:first-letter , blockquote p:first-letter { color: #000; font: 2.3em serif; float: left; margin: .2em .2em 0 0; } Und die Lösung, falls es eine gibt?

In diesem Fall existiert sie und ist relativ einfach. Lassen Sie einfach ein Leerzeichen zwischen dem Pseudo-Element und dem Symbol, das Sie anwenden müssen, sei es das Komma ( , ) oder die geschweifte Klammer ( { ).

Wenn Sie es nicht glauben, hier ist das dritte Beispiel . p:first-letter , blockquote p:first-letter { color: #000; font: 2.3em serif; float: left; margin: .2em .2em 0 0; } Hey!! Hier ist noch nicht alles beendet! Ein weiteres kleines Problem ergibt sich im Zusammenhang mit Listen. Und was passiert jetzt?

Related: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

Wenn wir einen Stil auf das Pseudo-Element :first-letter bei Listenelementen anwenden, überträgt IE dies freundlicherweise auf den Marker des jeweiligen Listenelements (Aufzählungszeichen bei ungeordneten Listen, Zahl oder Buchstabe bei geordneten Listen). Ungläubig?

Sehen Sie sich das vierte Beispiel an. Und die Lösung für dieses Durcheinander? Wenn Sie Tintenfisch als Haustier akzeptieren, sagen wir: Entfernen Sie die Listenmarker mittels: li {list-style:none} Wenn nicht, dann eben nichts. Ein weiteres unwichtiges Detail ist, dass es IE7b2 egal ist, ob keine Leerzeichen zwischen dem Pseudo-Element und dem Zeichen { vorhanden sind.

Sein kleinerer Bruder hingegen kümmert sich sehr wohl darum, also sollten wir seinen persönlichen Raum respektieren. Und wo wir gerade dabei sind, was ist mit der Spezifität? Nun, was soll schon passieren, jedenfalls nicht mit IE .

Worth a look: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Zunächst müssen wir wissen, dass diese Pseudo-Elemente nur (was immerhin einiges ist) Block-Level-Elemente betreffen. Gut, wenn wir Eigenschaften beispielsweise für einen Absatz definieren und anschließend weitere Eigenschaften für einen anderen Absatz, der innerhalb eines Zitatblocks ( blockquote ) erscheint, werden beide Absätze dieselben Merkmale aufweisen (klar, vorausgesetzt, wir haben daran gedacht, das entsprechende Leerzeichen zwischen dem Pseudo-Element und seinem wunderbaren Symbol einzufügen).

Alles zusammengefasst im letzten Beispiel . Und die Lösung? Da ich heute schon müde bin, suchen Sie diese selbst. Kategorie: CSS —> Sie können die Kommentare dank des RSS 2.0 -Feeds verfolgen.

Sie könnten auch einen Kommentar hinterlassen oder einen Trackback von Ihrer Website senden. Vorheriger Artikel: Formulare überarbeiten (Episode I) Nächster Artikel: Wir stellen Asides vor Hinterlassen Sie Ihren Kommentar Die Felder Name und E-Mail sind Pflichtfelder Fügen Sie uns hinzu… Tags, die wir allgemein hervorheben Barrierefreiheit bert bos blockquote Bug cañas Zitate cite Verhalten Wissen CSS escuas Standards fieldset Firefox Format Formular Schriftarten hidden ie IE 7 Informationen javascript legend Liste niquelando Pflicht opera Strand q squash Urlaub w3c WCAG xhtml Dieses Werk steht unter einer Creative Commons -Lizenz.

P.S. A few readers have asked which software de testing we actually reach for — it's Deque axe DevTools Pro; take a look here if you want the current details.