Code CSS pour implémenter des techniques compatibles avec divers navigateurs_Experience Exchange

Lors de l'écriture de feuilles de style CSS, nous rencontrons souvent des problèmes de compatibilité des navigateurs. Par exemple, les navigateurs avec des noyaux différents peuvent ne pas afficher le même affichage, et différentes versions des navigateurs peuvent également avoir des problèmes de compatibilité supérieure et inférieure. est devenu un problème pour nous. Si vous connaissez très bien la technologie CSS Hack, alors c'est trop simple, mais pour ceux qui ne la comprennent pas très bien, c'est vraiment devenu un problème pour eux. Voici un article du blog officiel de Zhao Lei pour présenter des conseils de compatibilité avec différents navigateurs. Mais ne pensez pas que tant qu'il y a une erreur dans l'affichage du navigateur, il s'agit d'un problème de navigateur. Il est également probable que votre structure ne soit pas bonne. Après tout, lors de la construction d'une maison. , vous devez d'abord installer des barres d'acier.

1, différentes interprétations de l'interpréteur box

Le code est le suivant :

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width 
/**/:500px; //for ie6.0-}

2, cacher le CSS dans ie, utiliser sous-sélection html>body #box{ }
3, seul IE reconnaît *html #box{ }
4, valide dans ie/win mais caché dans ie/max, utilisez une barre oblique inverse /* */
# box{ }
5, définissez un style séparé pour ie. Voici une description plus détaillée

6, double distance générée par flottant ie #box{ float:left width:100px; 0 0 100px ; //Dans ce cas, IE générera une distance de 200px display:inline; //Ignorer les flotteurs}
Parlons en détail des deux éléments block et inline. est toujours sur une nouvelle ligne Le début, la hauteur, la largeur, la hauteur de la ligne et les marges peuvent tous être contrôlés (éléments de bloc les caractéristiques des éléments Inline sont : sur la même ligne que les autres éléments,... ne peuvent pas être contrôlés (en ligne) ; elements);
#box{ display:block; //Peut simuler des éléments en ligne en tant qu'éléments de bloc display:inline; //Obtenir l'effet de disposition dans la même ligne diplay:table //pour ff, simuler l'effet de table}

7, pour oprea uniquement @media all et (min-width:0px){/* opera */#box{ }}
8, IE et le problème de la largeur et de la 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 y avait min. C'est un gros problème. Si vous utilisez uniquement la largeur et la hauteur, ces deux valeurs ne changeront pas dans un navigateur normal. Si vous utilisez uniquement min-width et min-height, 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{ width: 80px; height: 35px;}html>body #box{ width: auto; min-width: 80px; 🎜> 9. Largeur minimale de la page
Min-width est une commande CSS très pratique qui 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. Pour que cette commande fonctionne sur IE, vous pouvez placer un dc6dce4a544fdca2df29d5ac0ea9906b sous la balise 6c04bd5ca3fcae76e30b72ad730ca86d, puis spécifier une classe pour le div :

Ensuite, le CSS est conçu comme ceci : #container{ min-width: 600px; width:expression(document.body.clientWidth 8395c9fae224aaaeb3ff879535565582 1200? "1200px" : "auto";}
10, flotteur clair
.hackbox{ display:table; //Afficher l'objet sous forme de tableau au niveau de l'élément de bloc} ou .hackbox{ clear:both;}
Ou ajoutez : after (pseudo-objet) pour définir le contenu qui apparaît après l'objet. Il est généralement utilisé en conjonction avec le contenu. IE ne prend pas en charge ce pseudo-objet et n'est pas pris en charge par les navigateurs Ie, donc cela n'affecte pas. Navigateurs IE/WIN. -------C'est le plus gênant...

#box:after{ content: "."; affichage : bloc ; hauteur : 0 ; clair : visibilité : masqué ;}
11, le texte IE flottant DIV produit un bug de 3 pixels
L'objet de gauche est flottant et celui de droite est positionné en utilisant la marge gauche du patch extérieur. Le texte dans l'objet de droite sera à 3 pixels de la gauche #box{ float:left ; 800px;}#left{ float:left; width :50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //Cette phrase est la clé}
Code HTMLb390322fe69e754cc2d7247050226b6d 961dd75297247cb17f67e6948fb0666816b28748ea4df4d9c2150843fecfba68
12, sélecteur d'attribut (ce n'est pas compatible, c'est un bug pour cacher le CSS) p[id]{}div[id]{}
Ceci est masqué pour IE6.0 et les versions ci-dessous, et fonctionne avec FF et OPera

Il existe toujours une différence entre le sélecteur d'attribut et le sous-sélecteur. La portée du sous-sélecteur est réduite dans la forme, tandis que la portée du sélecteur d'attribut est relativement grande. Par exemple, dans p[id], tous. Les balises p ont un identifiant. sont toutes du même style.

Ce qui précède est le code CSS pour implémenter des techniques compatibles avec différents navigateurs_le contenu de l'échange d'expériences. le site PHP chinois (www.php .cn) !