suchen

Heim >Web-Frontend >CSS-Tutorial >Detaillierte Erläuterung des Zoom-Attributs

Detaillierte Erläuterung des Zoom-Attributs

藏色散人
藏色散人Original
2021-03-01 14:16:347531Durchsuche

Das Zoom-Attribut ist ein IE-spezifisches Attribut. Zusätzlich zum Festlegen oder Abrufen des Zoomverhältnisses eines Objekts kann es auch das Haslayout-Attribut des IE auslösen, Floats löschen, Randüberlappungen löschen usw.

Detaillierte Erläuterung des Zoom-Attributs

Die Betriebsumgebung dieses Artikels: Windows 7-System, CSS3-Version, Dell G3-Computer.

CSSs Zoom-Attribut

Zoom ist ein IE-spezifisches Attribut. Zusätzlich zum Festlegen oder Abrufen des Zoomverhältnisses eines Objekts kann es auch das Haslayout-Attribut des IE auslösen, Floats löschen, Randüberlappungen löschen usw. Es ist jedoch zu beachten, dass der Firefox-Browser das Zoom-Attribut nicht unterstützt, das Zoom-Attribut jedoch auch im Webkit-Kernel-Browser unterstützt werden kann.

(1) Werfen wir einen Blick auf die Rolle des Zooms in Nicht-IE-Browsern: Schauen Sie sich das Beispiel unten an, auf das ich unter Google Chrome zugegriffen habe. In diesem Beispiel besteht die Rolle des Zooms darin, auf das Zweifache des Originals zu zoomen Größe (Leser können versuchen, selbst herauszuzoomen)

1.zoom: 1 Wenn 

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
<style>  
    div{  
        width: 100px;  
        height: 100px;  
        border: 3px solid red;   
        zoom: 1;  
}  
</style>  
    </head>  
    <body>  
        <div>hello</div>  
    </body>  
<html>

, ist das Ergebnis des obigen Codes wie in der Abbildung gezeigt:

Detaillierte Erläuterung des Zoom-Attributs

[Empfohlenes Lernen: CSS-Video-Tutorial]

2.zoom: 2 Das heißt, das Vergrößern erfolgt um das Zweifache des Originals: 

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
<style>  
    div{  
        width: 100px;  
        height: 100px;  
        border: 3px solid red;   
        zoom: 2;  
}  
</style>  
    </head>  
    <body>  
        <div>hello</div>  
    </body>  
<html>

Der Screenshot des Ergebnisses sieht wie folgt aus:

Detaillierte Erläuterung des Zoom-Attributs

Hinweis: Zoom scheint das Vergrößern oder Verkleinern in Nicht-IE-Browsern zu unterstützen Da es sich bei diesem Attribut jedoch um ein nicht standardmäßiges CSS-Attribut handelt, wird es im Allgemeinen in Nicht-IE-Browsern verwendet. Der Browser verwendet keinen Zoom, um den Skalierungseffekt von Divs zu erzielen. Wenn Sie die Größe vergrößern oder verkleinern möchten, können Sie dies tun Verwenden Sie direkt das CSS3-Transformationsattribut.

(2) Nachdem wir uns die Leistung von Zoom in Nicht-IE-Browsern angesehen haben, sollten wir einen Blick auf die Rolle dieses Attributs in IE-Browsern werfen.

So verwenden Sie Zoom: 

zoom : normal | number

normal: Standardwert. Verwenden Sie die tatsächliche Größe des Objekts

Zahl: % |. Wenn der Gleitkomma-Realwert 1,0 oder der Prozentsatz 100 % beträgt, entspricht er dem Normalwert dieses Attributs. Im Volksmund ist es Zoom: Die folgende Zahl ist der Vergrößerungsfaktor, der ein numerischer Wert oder a sein kann Prozentsatz. Zum Beispiel: Zoom:1, Zoom:120 %. Dieses Attribut funktioniert nur im IE, daher wird sein eigentlicher Zweck selten verwendet. Die am häufigsten verwendete Funktion ist das Löschen von Floats usw., wie zum Beispiel: 

.border{ 
border:1px solid #CCC; 
padding:2px; 
overflow:hidden; 
_zoom:1; 
}

_zoom ist der Teil des CSS-Hacks, der im IE6 funktioniert. Der IE6-Browser führt zoom:1 aus, um das Zoomverhältnis des Objekts anzuzeigen, aber hier werden

overflow:hidden und _zoom:1;

Auf die gleiche Weise können Sie die gleiche Methode auch verwenden, um das Überlappungsproblem von Randattributen im IE-Browser zu beseitigen: Dadurch wird die zweite Rolle des Zoom-Attributs im IE angezeigt, das

kompatibel mit IE6, IE7 und ist Bei IE8-Browsern stoßen wir häufig auf einige Probleme, die durch die Verwendung von Zoom:1 gelöst werden können, das die folgenden Funktionen hat:

(2) Lösen Sie das Haslayout des IE-Browsers aus, um einige Probleme wie Floating und Randüberlappung unter IE zu lösen.

Diese Site verwendet beispielsweise DIV, um eine Zeile und zwei Spalten anzuzeigen. HTML-Code: 

<div class="h_mainbox">   
<h2>推荐文章</h2>   
<ul class="mainlist">   
<li><a href="#" style="color:#0000FF" target="_blank">CSS库吧</a></li>   
<li><a href="#" style="color:#0000FF" target="_blank">原创< /a></li>   
</ul>   
</div>

CSS-Code: 

.h_mainbox { border:1px solid #dadada; padding:4px 15px; background:url(../mainbox_bg.gif) 0 1px repeat-x; margin-bottom:6px; overflow:hidden}   
.h_mainbox h2 { font-size:12px; height:30px; line-height:30px; border-bottom:1px solid #ccc; color:#555;}   
.h_mainbox h2 span { float:right; font-weight:normal;}   
.h_mainbox ul { padding:6px 0px; background:#fff;}   
.mainlist { overflow:auto; zoom:1;}   
.h_mainbox li { width:268px; float:left; height:24px; overflow:hidden; background:url(../icon3.gif) 0 6px no-repeat; padding:0px 5px 0px 18px; line-height:200%;}

. Der Zoom:1 in der Hauptliste kann in IE6, IE7 und IE8 normal angezeigt werden.

(3) Das Folgende ist eine Zusammenfassung der allgemeinen Funktionen des Zoom-Attributs in IE-Browsern. Ich hoffe, dass es bei der zukünftigen Verwendung dieses Attributs hilfreich sein wird:

1. Überprüfen Sie, ob die Beschriftung der Seite geschlossen ist

Unterschätzen Sie das nicht, vielleicht ist es ein Fehler. Das CSS-BUG-Problem, das Sie seit zwei Tagen nicht gelöst haben, ist nur darauf zurückzuführen. Schließlich werden Seitenvorlagen in der Regel von Entwicklern verschachtelt, was leicht zu solchen Problemen führen kann.

Kurztipp: Sie können die Datei mit Dreamweaver öffnen, um sie zu überprüfen. Wenn keine geschlossenen Tags vorhanden sind, werden diese im Allgemeinen mit einem gelben Hintergrund hervorgehoben.

　2. Stileliminierungsmethode

Einige komplexe Seiten laden möglicherweise N externe Link-CSS-Dateien, löschen dann die CSS-Dateien einzeln, suchen die durch den Fehler ausgelösten spezifischen CSS-Dateien und schränken den Sperrbereich ein.

　Löschen Sie für die gerade gesperrte problematische CSS-Stildatei die spezifischen Stildefinitionen Zeile für Zeile, suchen Sie die spezifische Trigger-Stildefinition und sogar die spezifischen Trigger-Stilattribute.

　3. Modulbestätigungsmethode

Manchmal können wir auch mit den HTML-Elementen der Seite beginnen. Löschen Sie verschiedene HTML-Module auf der Seite und suchen Sie das HTML-Modul, das das Problem auslöst.

　4. Überprüfen Sie, ob Floats gelöscht werden

Tatsächlich gibt es viele CSS-BUG-Probleme, die dadurch verursacht werden, dass Floats nicht gelöscht werden. Es ist notwendig, eine gute Angewohnheit beim Löschen von Floats zu entwickeln. Es wird empfohlen, die Methode zum Löschen von Floats ohne zusätzliche HTML-Tags zu verwenden (versuchen Sie, ähnliche Methoden wie overflow:hidden;zoom:1 zum Löschen von Floats zu vermeiden, da diese zu restriktiv sind). ).

　5. Überprüfen Sie, ob Haslayout unter IE ausgelöst wird

Viele komplexe CSS-Fehler im IE hängen eng mit dem einzigartigen Haslayout des IE zusammen. Wenn Sie mit haslayout vertraut sind und es verstehen, können Sie komplexe CSS-Fehler mit weniger Aufwand beheben. Es wird empfohlen, „Über das Layout zu haben“ zu lesen, übersetzt von old9 (wenn Sie die große GFW nicht überqueren können, können Sie den Repost auf Blau lesen)

Kurztipp: Wenn haslayout ausgelöst wird, werden die Eigenschaften im IE-Debugging-Tool IE angezeigt In der Entwicklersymbolleiste wird angezeigt, dass der Haslayout-Wert -1 ist.

　6. Methode zum Debuggen von Rändern und Hintergrund

Wie der Name schon sagt, dient sie dazu, einen auffälligen Rand oder Hintergrund (normalerweise schwarz oder rot) für das zu debuggende Element festzulegen. Diese Methode ist eine der am häufigsten verwendeten Methoden zum Debuggen von CSS-Fehlern und ist immer noch auf komplexe Fehler anwendbar. Erschwinglich und umweltfreundlich^^

Das Letzte, was ich betonen möchte, ist, dass die Entwicklung guter Schreibgewohnheiten, die Reduzierung zusätzlicher Tags, eine größtmögliche Semantik und die Einhaltung von Standards uns tatsächlich häufiger vor vielen besonders komplexen CSS-Fehlern bewahren können Dann ist es so: Wir machen uns selbst Ärger.

Das ist alles, was ich vorerst zu sagen habe. Wenn sich im oben Gesagten ein Fehler befindet, geben Sie mir bitte einen Rat.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Zoom-Attributs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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
Vorheriger Artikel：Ausführliche Erläuterung des BenutzerauswahlattributsNächster Artikel：Ausführliche Erläuterung des Benutzerauswahlattributs

In Verbindung stehende Artikel

Mehr sehen