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

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

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

4 Il y a quelques semaines By DDD

R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger?

4 Il y a quelques semaines By DDD

Musée à deux points: toutes les expositions et où les trouver

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7376

15

Tutoriel Java

1628

14

Tutoriel CakePHP

1355

52

Tutoriel Laravel

1267

25

Tutoriel PHP

1216

29

Afficher plus