Correction du bug d'utilisation du débordement d'attribut CSS sous l'échange IE_Experience

Nous souhaitons créer un fichier HTML de test. Voici les extraits de code clés

Copiez le code Le code est le suivant. suit :

<code> <br> " rel="license">Respecter mes droits d'auteur <br>                                                                 licence" >Respecter mes droits d'auteur <br>                                                                                                    Respecter mes droits d'auteur <br>                                                                                                                                          </code>

/div>

Dans le code ci-dessus, j'appliquerai le CSS suivant

Copier le code Le code est la suivante :

div{

width: 60%;
}

pre{
overflow : auto
background-color : # fff0f5 ;
margin : 1.6em 0 ;
padding : 0 1.6em ;


L'affichage du code ci-dessus dans Firefox est prévisible.

Mais dans IE6, aucun effet de débordement ne peut être affiché


Figure 1 L'effet sous IE6

L'affichage dans IE7 est également un peu différent, avec une barre de défilement droite ennuyeuse

Effet Figure 2 sous IE7

Le bug dans IE6 peut être résolu en ajoutant de la largeur au bloc conteneur, c'est-à-dire

Copiez le code Le code est la suivante : pre{

overflow : auto ;

background-color :
margin : 1.6em 0 ;
padding : 0 1.6em ;
width : 90% ;
}


À ce moment, la barre de défilement d'IE6 sort, mais elle se comporte de la même manière que celle d'IE7, avec une barre de défilement supplémentaire à droite.

La raison d'une barre de défilement droite supplémentaire est que IE ajoute toujours la barre de défilement inférieure à l'intérieur de la hauteur totale de l'élément. Cela fait partie de la hauteur de l'élément occupée par la barre de défilement inférieure et ne peut pas être entièrement. affiché, donc IE Une barre de défilement à droite est automatiquement ajoutée afin que le contenu de l'élément bloqué puisse être vu après le défilement.

Enfin, afin de supprimer la barre de défilement sur le côté droit d'IE, nous ajoutons le CSS suivant au bloc contenant

Copier le code Code comme suit : pre{

overflow : auto ;

background-color :
margin : 1.6em 0 ; > padding : 0 1.6em ;
width: 90%;
overflow-y: caché
}


De cette façon, nous créons le même overflow : effet automatique dans IE. comme dans Firefox, Opera et Safari.

Dans les applications pratiques, cet effet peut être appliqué à tous les éléments de format fixe (généralement des pré-éléments), le plus souvent des blocs de code.