Beheben Sie den Fehler bei der Verwendung eines CSS-Attributüberlaufs unter IE_Experience Exchange

Wir möchten eine Test-HTML-Datei erstellen. Im Folgenden finden Sie die wichtigsten Codeausschnitte folgt:

<code>                               Lizenz" >Mein Urheberrecht beachten</a> <a style="CURSOR: pointer" data="36292" class="copybut" id="copybut36292" onclick="doCopy('code36292')">                                                           Beachten Sie mein Urheberrecht</a> <u>                                                                                                                                                           ; </u>  </code>

/div> Im obigen Code werde ich das folgende CSS anwenden

Code kopieren


Der Code ist wie folgt:


div{

width: 60%;}

pre{

overflow : auto ; fff0f5 ; margin : 1.6em ; padding : 0 1.6em ; Die obige Codeanzeige in Firefox ist vorhersehbar.

Aber im IE6 kann kein Überlaufeffekt angezeigt werden

Abbildung 1 Der Effekt unter IE6





Die Anzeige im IE7 ist auch etwas anders, mit einer störenden rechten Bildlaufleiste


Abbildung 2 Effekt unter IE7

Der Fehler in IE6 kann behoben werden, indem dem enthaltenden Block Breite hinzugefügt wird, d. h. Code kopieren

Code ist wie folgt:

pre{ overflow : auto ; margin : 1.6em 0 ; padding : 0 1.6em ;

Breite: 90%;

}

Zu diesem Zeitpunkt wird die Bildlaufleiste von IE6 angezeigt, verhält sich jedoch genauso wie IE7, mit einer zusätzlichen rechten Bildlaufleiste. Der Grund für eine zusätzliche rechte Bildlaufleiste ist, dass der IE die untere Bildlaufleiste immer innerhalb der Gesamthöhe des Elements einfügt. Dadurch nimmt die untere Bildlaufleiste einen Teil der Höhe des Elements ein und kann nicht vollständig sein angezeigt, also IE Eine Bildlaufleiste auf der rechten Seite wird automatisch hinzugefügt, damit der Inhalt des blockierten Elements nach dem Scrollen sichtbar ist. Um schließlich die Bildlaufleiste auf der rechten Seite des IE zu entfernen, fügen wir dem enthaltenden Block das folgende CSS hinzu:

Code kopieren


Code wie folgt:


pre{

overflow : auto ;
margin : 1.6em 0 ; > padding : 0 1.6em ;
overflow-y: versteckt;
}


Auf diese Weise erzeugen wir den gleichen Overflow: Auto-Effekt im IE wie in Firefox, Opera und Safari.

In praktischen Anwendungen kann dieser Effekt auf alle Elemente mit festem Format (normalerweise Vorelemente) angewendet werden, am häufigsten auf Codeblöcke.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn