Maison > Article > interface Web > Comment utiliser l'attribut zoom ou overflow:auto en CSS

Comment utiliser l'attribut zoom ou overflow:auto en CSS

php中世界最好的语言original: 2018-03-22 16:36:112546parcourir

Cette fois, je vais vous montrer comment utiliser l'attribut zoom ou overflow:auto en CSS. Quelles sont les précautions lors de l'utilisation de l'attribut zoom ou overflow:auto en CSS. Voici des cas pratiques. jetez un oeil une fois.

Avant-propos

En fait, l'attribut Zoom en CSS est généralement inconnu et ne peut même pas être trouvé dans certains manuels CSS. En fait, l'attribut Zoom est un attribut propriétaire du navigateur IE et n'est pas pris en charge par Firefox et les autres navigateurs. Il définit ou récupère la mise à l'échelle de l'objet. De plus, il a d'autres fonctions, telles que le déclenchement de l'attribut hasLayout de ie, la suppression des flotteurs , la suppression du chevauchement des marges, etc.

Étant donné que l'attribut Zoom est un attribut propriétaire du navigateur IE, sa fonction flottante n'est applicable qu'au navigateur IE, tandis que Firefox, Google et d'autres navigateurs doivent utiliser l'attribut overflow:auto pour effacer le flottement. Par conséquent, ces deux attributs doivent être utilisés pour assurer la compatibilité avec les navigateurs IE6, IE7, IE8, Firefox et Google.

Lorsque nous reconstruisons la page, nous utilisons souvent la disposition d'un grand conteneur contenant plusieurs petits conteneurs flottants. Cependant, si le grand conteneur à l'extérieur n'a pas de valeur de hauteur fixe, la hauteur du grand conteneur ne le sera pas. be À mesure que la hauteur du petit conteneur à l'intérieur change, le contenu débordera. À ce moment-là, il vous suffit de vider le flotteur et il reviendra à la normale. Par conséquent, tant que l'attribut overflow:auto est ajouté au grand conteneur externe, le problème de la suppression des flotteurs sous IE7 et Firefox peut être résolu. Cependant, il ne prend pas effet sous IE6, donc nous aussi. Vous devez utiliser le zoom, un attribut privé d'IE pour obtenir un effet de compatibilité flottante complètement clair.

Exemple de code

<!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>

Je crois que je je l'ai vu Vous maîtrisez la méthode dans le cas de cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Résumé des méthodes de dégradé de couleurs couramment utilisées

Simulation 2D pour réaliser des effets spéciaux d'animation de rotation de grande roue

Tutoriel image et texte sur l'attribut de dimensionnement de boîte de CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utilisez CSS3 pour implémenter le flottement de la souris pour agrandir les imagesArticle suivant：Utilisez CSS3 pour implémenter le flottement de la souris pour agrandir les images

Articles Liés

Voir plus