Solution compatible avec le navigateur CSS_CSS/HTML

1. L'arrière-plan de la page Web est semi-transparent
L'arrière-plan de la page Web est semi-transparent

Copier le code Le code est le suivant :

opacity:0.8;
filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; Méthode CSS dans IE6 pour résoudre le problème de translucidité des images PNG :
#DIVname {
width: 300px;
height: 99px;
background: url('images/top.png') no- répéter top;
*background: none;
*filter:progid :DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='corp', src='template/flower/images/top.png' );
}

2. Effacer le flottant

Copier le code Le code est le suivant :

.clearfix:after{ content:"."; display:block height:0; :inline-block>
.clear{hauteur:0; taille de ligne:0; débordement:caché; affichage:bloc;>
*html .clearfix{hauteur : 1%;}
.clearfix{display:block;>

3. Marges doubles flottantes IE6
1. Utilisez display:inline pour les éléments flottants ; 🎜>2. Bug d'espacement de 3 pixels sous IE6 : dans IE6, lorsque du texte (ou aucun élément flottant) après un élément flottant, il y aura un espace supplémentaire de 3 px entre le texte et l'élément flottant. Ajoutez display:inline ou concevez un -3px. écart avec la couche flottante pour résoudre ce bug. Bogue d'espacement de 3 pixels
Hauteur minimale min-hauteur en div+css
Méthode 1 :

Copier le code Le code est le suivant :

#DIVname {

min-height:150px;
*height:auto!important;
_height:150px;
overflow : visible;
}


Méthode 2 :

Copiez le code Le code est le suivant :

#DIVname {

min-height:1000px;
_height:expression((document.documentElement.clientHeight||document.body.clientHeight)>1000?"1000px" :"");
}

5. Bugs de l'index Z sous IE

De manière générale, IE a des exigences plus élevées pour le parent si le parent a un attribut de position mais ne donne pas d'attribut z-index, alors Le. La valeur par défaut est 0, donc quelle que soit la hauteur de l'attribut z-index dans le sous-ensemble, il est inutile.
Donc, généralement, vous devez donner au parent contenant l'attribut z-index un attribut z-index:1, ce qui peut résoudre de nombreux problèmes inexplicables.
6. Bug de redimensionnement de la fenêtre IE6
Lorsque le corps est placé au centre et que la taille du navigateur IE est modifiée, tous les éléments positionnés relativement dans le corps seront résolus. est de définir position:relative pour le corps.
7. La taille du texte et la hauteur de ligne ne sont pas compatibles
Pour une même police de même taille, la hauteur et la taille de la ligne sont différentes dans chaque navigateur, la hauteur de ligne doit donc être définie. .
8. Bug de marge miroir
Sous IE6, lorsqu'il y a un élément float dans l'élément externe, si l'élément externe définit margin-top:5px, margin-bottom:5px sera automatiquement généré, des problèmes similaires se produiront également avec le remplissage. La solution consiste à définir une bordure ou un flotteur sur l'élément extérieur.
9. Les espaces blancs sous img
En html il y a :

, vous constaterez que le bas de l'image n'est pas proche du bas du conteneur, ce qui est dû aux caractères vides après img. Pour l'éliminer, vous devez écrire. comme ceci :

Les deux balises suivantes doivent être côte à côte. Ce bug existe toujours sous IE7, la solution est : display:block.

10. Les images et le texte vont de pair
Tout le monde sait que l'alignement de l'image inclut le texte en haut, au milieu, au milieu, etc. Vous pouvez essayer d'ajuster l'image et le texte pour créer. ils s'alignent sous IE et FF Si vous pouvez être cohérent, vous constaterez que peu importe la façon dont vous l'ajustez, vous ne serez pas satisfait. Laissez simplement l'image et le texte flotter et ajustez-les avec une marge.
Hauteur de ligne perdue.

Text

Malheureusement, l'effet de hauteur de ligne d'une seule ligne de texte disparaît dans IE6. . . , la raison est que l'élément inline-block et l'élément inline sont écrits ensemble. Solution : faites en sorte que l'image et le texte flottent.