Explication détaillée de l'attribut zoom-tutoriel CSS-php.cn

L'attribut zoom est un attribut spécifique à IE. En plus de définir ou de récupérer le taux de zoom d'un objet, il peut également déclencher l'attribut haslayout d'IE, effacer les flotteurs, effacer les chevauchements de marge, etc.

Explication détaillée de l'attribut zoom

L'environnement d'exploitation de cet article : système Windows 7, version CSS3, ordinateur Dell G3.

Attribut de zoom CSS

le zoom est un attribut spécifique à IE. En plus de définir ou de récupérer le taux de zoom de l'objet, il possède également le haslayout qui peut se déclencher. IE. Propriétés, flottement clair, chevauchement de marge clair et autres fonctions. Cependant, il convient de noter que le navigateur Firefox ne prend pas en charge l'attribut zoom, mais que l'attribut zoom peut également être pris en charge dans le navigateur du noyau Webkit.

(1) Regardons le rôle du zoom dans les navigateurs non-IE : Regardez l'exemple ci-dessous. J'y ai accédé sous Google Chrome. Dans cet exemple, le rôle du zoom est de zoomer. l'original 2 fois (les lecteurs peuvent essayer eux-mêmes l'opération de zoom)

1.zoom:1 Quand

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

Copier après la connexion

Le résultat du code ci-dessus est tel qu'indiqué dans la figure :

Explication détaillée de lattribut zoom

[Apprentissage recommandé : Tutoriel vidéo CSS]

2.zoom : 2 signifie zoomer jusqu'à 2 fois la taille d'origine :

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

Copier après la connexion

La capture d'écran du résultat est la suivante :

Explication détaillée de lattribut zoom

Remarque : le zoom semble prendre en charge le zoom avant ou arrière dans les navigateurs non-IE, mais comme cet attribut est un non- attribut CSS standard, le zoom n'est généralement pas utilisé dans les navigateurs non IE. Pour obtenir l'effet de mise à l'échelle de div, vous devez maintenant effectuer un zoom avant ou arrière directement à l'aide de l'attribut transform de CSS3.

(2) Après avoir examiné les performances du zoom dans les navigateurs non-IE, nous devrions examiner le rôle de cet attribut dans les navigateurs IE.

Comment utiliser Zoom :

zoom : normal | number

Copier après la connexion

normal : Valeur par défaut. Utilisez la taille réelle de l'objet

numéro : % | nombre réel à virgule flottante non signé. Lorsque la valeur réelle à virgule flottante est de 1,0 ou que le pourcentage est de 100 %, cela équivaut à la valeur normale de cet attribut, en explication vernaculaire, il s'agit d'un zoom : le nombre suivant est le facteur d'agrandissement, qui peut être une valeur numérique ou un. pourcentage. Par exemple : zoom :1, zoom :120 %. Cet attribut ne fonctionne que dans IE, son objectif réel est donc rarement utilisé. La fonction la plus couramment utilisée est d'effacer les flottants, etc., comme :

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

Copier après la connexion

_zoom est un hack CSS uniquement pour IE6. partie. Le navigateur IE6 exécutera zoom:1 pour indiquer le taux de zoom de l'objet, mais ici

overflow:hidden; et _zoom:1 sont utilisés ensemble pour effacer le flottement interne de la bordure.

De la même manière, vous pouvez également utiliser la même méthode pour résoudre le problème de chevauchement des attributs de marge dans le navigateur IE : cela fait apparaître le deuxième rôle de l'attribut zoom dans IE, qui est

Compatible avec les navigateurs IE6, IE7 et IE8, vous rencontrez souvent certains problèmes. Vous pouvez utiliser zoom:1 pour les résoudre. Il a les fonctions suivantes :

(2) Déclenchez le haslayout du navigateur IE. résoudre le problème flottant sous IE, le chevauchement des marges et d'autres problèmes.

Par exemple, ce site utilise DIV pour afficher une ligne et deux colonnes Code HTML :

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

Copier après la connexion

Code CSS :

.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%;}

Copier après la connexion

.mainlist où zoom:1 peut être IE6. , IE7 et IE8 s'affichent normalement.

(3) Ce qui suit est un résumé des fonctions courantes de l'attribut zoom dans les navigateurs IE. J'espère que cela sera utile lors de l'utilisation de cet attribut à l'avenir :

1. le label de la page est fermé

Ne sous-estimez pas cela. Peut-être que le problème CSS BUG que vous n'avez pas résolu depuis deux jours ne vient que de là. Après tout, les modèles de page sont généralement imbriqués par les développeurs, et ils peuvent facilement créer de tels problèmes.

Conseil rapide : vous pouvez utiliser Dreamweaver pour ouvrir le fichier pour vérifier. Généralement, il n'y a pas de balises fermées et le fond jaune sera mis en surbrillance.

　2. Méthode d'élimination de style

Certaines pages complexes peuvent charger N fichiers CSS de liens externes, puis supprimer les fichiers CSS un par un, rechercher le fichier CSS spécifique déclenché par le BUG, et réduire la portée du verrouillage.

Pour le fichier de style CSS problématique qui vient d'être verrouillé, supprimez les définitions de style spécifiques ligne par ligne, localisez la définition de style de déclencheur spécifique et même les attributs de style de déclencheur spécifiques.

　3.Méthode de confirmation du module

Parfois on peut aussi partir des éléments HTML de la page. Supprimez différents modules HTML dans la page et recherchez le module HTML qui déclenche le problème.

　4. Vérifiez si les flotteurs sont effacés

En fait, il existe de nombreux problèmes de BUG CSS causés par la non-effacement des flotteurs. Il est nécessaire de développer une bonne habitude d'effacement des flottants. Il est recommandé d'utiliser la méthode d'effacement des flottants sans balises HTML supplémentaires (essayez d'éviter d'utiliser des méthodes similaires comme overflow:hidden;zoom:1 pour effacer les flottants, ce qui serait trop restrictif). ).

5. Vérifiez si haslayout est déclenché sous IE

De nombreux bogues CSS complexes sous IE sont étroitement liés à la disposition unique d’IE. La familiarité et la compréhension de haslayout vous aideront à résoudre des bogues CSS complexes avec moins d'effort. Il est recommandé de lire "On have layout" traduit par old9 (si vous ne parvenez pas à croiser le grand GFW, vous pouvez lire le repost sur le bleu)

Conseil rapide : si haslayout est déclenché, l'outil de débogage d'IE Barre d'outils du développeur IE La valeur haslayout sera affichée comme -1 dans les propriétés.

6. Méthode de débogage des bordures et de l'arrière-plan

Comme son nom l'indique, il s'agit de définir une bordure ou un arrière-plan bien visible (généralement noir ou rouge) pour l'élément à déboguer. Cette méthode est l’une des méthodes les plus couramment utilisées pour déboguer les bogues CSS, et elle est toujours applicable aux bogues complexes. Abordable et respectueux de l'environnement ^^

La dernière chose que je veux souligner est que développer de bonnes habitudes d'écriture, réduire les balises supplémentaires, être aussi sémantique que possible et respecter les normes peut en fait nous faire économiser beaucoup de CSS complexe supplémentaire. BUG, et plus encore. Lorsque nous le faisons, nous nous créons des problèmes.

C'est tout ce que j'ai à dire pour l'instant. S'il y a des erreurs dans ce qui précède, donnez-moi quelques conseils.

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!