1. Différentes interprétations des interprètes de boîte #box{
largeur:600px; //pour ie6.0-
width:500px; //pour ff+ie6.0;
}
#boîte{
largeur:600px!important //pour ff
largeur:600px; //pour ff+ie6.0
largeur :500px; //pour ie6.0-
}
2. Pour masquer les CSS dans IE, utilisez le sous-sélecteur
html>body #box{ }
3, reconnu uniquement par IE
*html #boîte{ }
4. Valable dans ie/win mais caché dans ie/max, utilisez une barre oblique inverse
5. Définissez le style séparément pour, par exemple
6. Double distance générée par le flottement, c'est-à-dire
#boîte{
flotteur : gauche ;
largeur : 100 px ;
margin:0 0 0 100px; //Dans ce cas, IE générera une distance de 200px
display:inline; //Ignorer les flottants
}
Parlons ici en détail des deux éléments block et inline. Les caractéristiques de l'élément Block sont : il commence toujours sur une nouvelle ligne, et la hauteur, la largeur, la hauteur de la ligne et les marges peuvent toutes être contrôlées (éléments block) ; les caractéristiques de l'élément Inline sont : et D'autres éléments sont sur la même ligne,... ne peuvent pas être contrôlés (éléments inline) ;
#boîte{
display:block; //Peut simuler des éléments en ligne en tant qu'éléments de bloc
display:inline; //Obtenir l'effet de disposer sur la même ligne
display:table; //pour ff, simule l'effet de table
}
7, pour l'opéra uniquement
@media tout et (min-width:0px){
#boîte{ }
}
8. Problèmes avec IE, largeur et hauteur
IE ne reconnaît pas la définition de min-, mais en fait, il traite la largeur et la hauteur normales comme s'il existait un min. Ce sera un gros problème si vous utilisez uniquement la largeur et la hauteur.
Ces deux valeurs ne changeront pas dans les navigateurs normaux. Si vous utilisez uniquement min-width et min-height, cela signifie que la largeur et la hauteur ne sont pas du tout définies sous IE.
Par exemple, si vous souhaitez définir une image de fond, cette largeur est plus importante. Pour résoudre ce problème, vous pouvez faire ceci :
#box{
largeur : 80px ;
hauteur : 35px ;
}
html>corps #boîte{
largeur : automatique ;
hauteur : automatique ;
largeur minimale : 80 px ;
hauteur minimale : 35 px ;
}
9. La largeur minimale de la page,
min-width, est une commande CSS très pratique. Elle permet de spécifier que la largeur minimale de l'élément ne peut pas être inférieure à une certaine largeur, afin de garantir que la composition est toujours correcte. Mais IE ne le reconnaît pas et traite en fait la largeur comme la largeur minimale. Afin de rendre cette commande également disponible sur IE, vous pouvez la placer sous la balise <body>, puis spécifier une classe pour le div. Le CSS est conçu comme ceci :
#container{.
largeur minimale : 600 px ;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
La première largeur minimale est normale ; mais la largeur de la deuxième ligne utilise Javascript, qui n'est reconnu que par IE, ce qui rendra également votre document HTML moins formel. Il implémente en fait la largeur minimale via le jugement Javascript.
La même méthode peut également être utilisée pour atteindre la largeur maximale pour IE :
#récipient
{
largeur minimale : 600 px ;
largeur maximale : 1 200 px ;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto";
}
10, flotteur clair
.hackbox{
display:table; //Affiche l'objet sous forme de table au niveau de l'élément de bloc
}
ou
.hackbox{
clair : les deux ;
}
Ou ajoutez : after (pseudo-objet) pour définir le contenu qui apparaît après l'objet. Il est généralement utilisé conjointement avec le contenu. IE ne prend pas en charge ce pseudo-objet et n'est pas pris en charge par les navigateurs Ie, il n'affecte donc pas IE/. Navigateurs WIN. -------C'est le plus gênant...
#box :après{
contenu: ".";
affichage : bloc ;
hauteur : 0 ;
clair : les deux ;
visibilité : cachée ;
}
11. Le texte IE flottant DIV produit un bug de 3 pixels
L'objet de gauche flotte et celui de droite est positionné en utilisant la marge gauche du patch extérieur. Le texte à l'intérieur de l'objet de droite sera espacé de 3 pixels par rapport à la gauche.
#boîte{
flotteur : gauche ;
largeur : 800 px ;
}
#gauche{
flotteur : gauche ;
largeur : 50 % ;
}
#droite{
largeur : 50 % ;
}
*html #gauche{
margin-right:-3px; //Cette phrase est la clé
}
Code HTML
12. Sélecteur d'attribut (cela ne peut pas être considéré comme compatible, c'est un bug de masquage du CSS)
p[id]{}
div[id]{}
est masqué pour les versions inférieures à IE6.0 et IE6.0.
Il existe toujours une différence entre les sélecteurs d'attributs et les sous-sélecteurs utilisés par FF et OPera. La portée des sous-sélecteurs est réduite dans la forme. La portée du périphérique est relativement grande. Par exemple, dans p[id], toutes les balises p avec id sont du même style.