Code CSS pour implémenter des techniques compatibles avec divers navigateurs

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-}

Copier après la connexion

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

sous la balise , 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 < 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 : #container{min-width: 600px;max-width: 1200px;width:expression(document.body.clientWidth < 600? " 600px" : document .body.clientWidth > 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 HTML

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) !

Étiquettes associées：

css，兼容各个浏览器

source：php.cn

Article précédent：Tutoriel graphique sur la conception de boutons à l'aide de la technologie des portes coulissantes_Échange d'expériences Article suivant：Code pour générer dynamiquement des mots flash à l'aide de l'échange css_Experience

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur