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