Heim >Web-Frontend >CSS-Tutorial >Das Zoom-Attribut oder das Overflow:auto-Attribut in CSS löscht Floating
Das Zoom-Attribut oder das Overflow:auto-Attribut in CSS löscht Floating
- 高洛峰Original
- 2017-03-01 15:20:201410Durchsuche
Vorwort
Tatsächlich ist das Zoom-Attribut in CSS im Allgemeinen unbekannt und kann nicht einmal in einigen CSS-Handbüchern gefunden werden. Tatsächlich ist das Zoom-Attribut ein proprietäres Attribut des IE-Browsers und wird von Firefox und anderen Browsern nicht unterstützt. Es legt die Skalierung des Objekts fest oder ruft sie ab. Darüber hinaus verfügt es über weitere Funktionen, z. B. das Auslösen des hasLayout-Attributs des IE, das Löschen von Floats, das Löschen von Margin-Überlappungen usw.
Da das Zoom-Attribut ein proprietäres Attribut des IE-Browsers ist, ist seine Floating-Funktion nur auf den IE-Browser anwendbar, während Firefox, Google und andere Browser das overflow:auto-Attribut verwenden müssen, um Floating zu löschen. Daher müssen diese beiden Attribute verwendet werden, um Kompatibilität mit den Browsern IE6, IE7, IE8, Firefox und Google zu erreichen.
Wenn wir die Seite rekonstruieren, verwenden wir häufig das Layout eines großen Containers, der mehrere schwebende kleine Container enthält. Wenn der große Container jedoch keinen festen Höhenwert hat, gilt dies auch für die Höhe des großen Containers Wenn sich die Höhe des kleinen Behälters im Inneren ändert, läuft der Inhalt über. Zu diesem Zeitpunkt müssen Sie nur den Schwimmer löschen und er kehrt zum Normalzustand zurück. Daher kann das Problem des Löschens von Floats unter IE7 und Firefox gelöst werden, solange das Attribut overflow:auto zum großen externen Container hinzugefügt wird. Unter IE6 wird es jedoch nicht wirksam, sodass wir auch Zoom verwenden müssen privates Attribut des IE, um die Floats vollständig zu löschen.
Beispielcode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>MJBlog</title>
<style type="text/css">
.box{
width:300px;
height:auto;
background-color: #000000;
margin:100px auto;
padding:5px;
}
.box h2{ width:300px; line-height:24px; color:#CCCCCC;}
.xx { width:140px; float:left; height:24px; overflow:hidden; padding:0px 5px; line-height:24px; color: #FF9933;}
.za{overflow:auto; zoom:1}
.zb{overflow:auto;}
.zc{zoom:1;}
</style>
</head>
<body>
<p class="box">
<h2>这个没加overflow:auto和zoom:1属性，没有清除浮动，底下的li产生溢出重叠现象</h2>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
</p>
<p class="box za">
<h2>这个加overflow:auto和zoom:1属性，清除浮动，正常</h2>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
</p>
</body>
</html>
Mehr Zoomattribute oder Überlauf in CSS: Für Bei Artikeln zum automatischen Löschen von Attributen achten Sie bitte auf die chinesische PHP-Website!