Frage Anfangsbuchstabe führt dazu, dass Chrome an der falschen Stelle hervorgehoben wird [duplizieren]


Diese Frage ist ein exaktes Duplikat von:

Wenn ich diesen CSScode verwende, um den ersten Buchstaben meines Textes zu formatieren, passiert in Chrome etwas Seltsames:

main p::first-letter {
  font-size: 300%;
}
<main>
  <p>
    This is some sample text
  </p>
</main>

Wenn ich jetzt zum Beispiel das Wort "is" hervorhebe, werden stattdessen die Buchstaben "pl" des Wortes "sample" hervorgehoben. Sie können dies hier testen: jsfiddle

Um es klarer zu machen, passiert folgendes:

demonstration

Wie Sie sehen können, ist der markierte Text an der falschen Stelle.

Ist das mein Fehler oder ist das ein Bug in Chrome? Wie repariere ich es?


5
2018-03-03 09:57


Ursprung


Antworten:


Ich habe herausgefunden, warum das so ist. Es ist wegen der "Rückkehr" nach dem <p>.

Um dieses Verhalten zu verhindern, müssen Sie die Balise schreiben <p> und sein Inhalt in einer Zeile, so:

<p>This is some sample text</p>

Und nicht so

<p>
    This is some sample text
</p>

Ich habe keine andere Lösung gefunden ... Entschuldigung.


4
2018-03-03 10:30



Der beste Code für jeden Browser enthält diesen Code

<main>
<p>
   <span>T</span>his is some sample text
</p>

main p span{
font-size: 300%;

}


0
2018-03-03 10:13