Comment utiliser l'attribut zoom ou overflow:auto en CSS
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Le prix du Bitcoin depuis sa naissance 2009-2025 Le résumé le plus complet des prix historiques du BTC
Jan 15, 2025 pm 08:11 PM
Depuis sa création en 2009, Bitcoin est devenu un leader dans le monde des cryptomonnaies et son prix a connu d’énormes fluctuations. Pour fournir un aperçu historique complet, cet article compile les données sur les prix du Bitcoin de 2009 à 2025, couvrant les principaux événements du marché, les changements de sentiment du marché et les facteurs importants influençant les mouvements de prix.
Aperçu du prix historique du Bitcoin depuis sa naissance. Collection complète des tendances historiques des prix du Bitcoin.
Jan 15, 2025 pm 08:14 PM
Le Bitcoin, en tant que crypto-monnaie, a connu une volatilité importante sur le marché depuis sa création. Cet article fournira un aperçu du prix historique du Bitcoin depuis sa naissance pour aider les lecteurs à comprendre ses tendances de prix et ses moments clés. En analysant les données historiques sur les prix du Bitcoin, nous pouvons comprendre l'évaluation de sa valeur par le marché, les facteurs affectant ses fluctuations et fournir une base pour les décisions d'investissement futures.
Une liste des prix historiques depuis la naissance du tableau des tendances des prix historiques Bitcoin BTC (dernier résumé)
Feb 11, 2025 pm 11:36 PM
Depuis sa création en 2009, le prix de Bitcoin a connu plusieurs fluctuations majeures, passant à 69 044,77 $ en novembre 2021 et tombant à 3191,22 $ en décembre 2018. En décembre 2024, le dernier prix a dépassé 100 204 $.
Le dernier prix du bitcoin en 2018-2024 USD
Feb 15, 2025 pm 07:12 PM
Prix USD Bitcoin en temps réel Facteurs qui affectent le prix du bitcoin Indicateurs pour prédire les prix des futurs bitcoins Voici quelques informations clés sur le prix du bitcoin en 2018-2024:
Comment personnaliser le symbole de redimensionnement via CSS et le rendre uniforme avec la couleur d'arrière-plan?
Apr 05, 2025 pm 02:30 PM
La méthode de personnalisation des symboles de redimension dans CSS est unifiée avec des couleurs d'arrière-plan. Dans le développement quotidien, nous rencontrons souvent des situations où nous devons personnaliser les détails de l'interface utilisateur, tels que l'ajustement ...
Comment utiliser l'attribut Clip-Path de CSS pour réaliser l'effet de courbe à 45 degrés du segmenter?
Apr 04, 2025 pm 11:45 PM
Comment réaliser l'effet de courbe à 45 degrés du segmenter? Dans le processus de mise en œuvre du segmentant, comment faire transformer la bordure droite en une courbe de 45 degrés lorsque vous cliquez sur le bouton gauche, et le point ...
La production de pages H5 est-elle un développement frontal?
Apr 05, 2025 pm 11:42 PM
Oui, la production de pages H5 est une méthode de mise en œuvre importante pour le développement frontal, impliquant des technologies de base telles que HTML, CSS et JavaScript. Les développeurs construisent des pages H5 dynamiques et puissantes en combinant intelligemment ces technologies, telles que l'utilisation du & lt; Canvas & gt; Tag pour dessiner des graphiques ou utiliser JavaScript pour contrôler le comportement d'interaction.
Le texte sous la disposition Flex est omis mais le conteneur est ouvert? Comment le résoudre?
Apr 05, 2025 pm 11:00 PM
Le problème de l'ouverture des conteneurs en raison d'une omission excessive du texte sous disposition flexible et de solutions est utilisé ...
