Il est courant que CSS soit compatible avec différents navigateurs. Il existe des tutoriels partout sur Internet.
Le contenu suivant n'est pas trop nouveau. C'est purement un résumé personnel. .
1. CSS HACK
Les deux méthodes suivantes peuvent résoudre presque tous les HACKs aujourd'hui.
1, !important
Avec la prise en charge par IE7 de !important, la méthode !important maintenant. HACK uniquement pour IE6.
(Faites attention à l'écriture. N'oubliez pas que la position de déclaration doit être avancée.)
2, IE6/IE77 contre FireFox
* +html et *html sont des balises spécifiques à IE, qui ne sont actuellement pas prises en charge par Firefox et *+html est une balise spécifique à IE7
*+html HACK pour IE7 doit s'assurer qu'il y a la déclaration suivante en haut du HTML :
2. Fermeture flottante universelle
Ajoutez le code suivant à Global CSS et ajoutez class="clearfix" au p qui doit être fermé. Cela fonctionne à chaque fois
3. Autres conseils de compatibilité
1, La définition du remplissage pour p dans FF entraînera une augmentation de la largeur et de la hauteur. , mais IE ne le fera pas. (peut être résolu avec !important)
2, Problème de centrage
2). Centré horizontalement : 0 auto (bien sûr, pas universel)
3. balise, vous devez définir display: block; (que l'on trouve couramment dans les balises de navigation)
4. La différence dans la compréhension de BOX entre FF et IE entraîne une différence de 2 pixels et certains paramètres sont définis sur p et présentent des problèmes tels que. en doublant la marge sous IE.
5, La balise ul a un style de liste et un remplissage par défaut sous FF. Il est préférable de la déclarer à l'avance pour éviter des problèmes inutiles. >6. En tant que wrapper externe, p ne doit pas avoir de hauteur fixe. Il est préférable d'ajouter overflow: caché pour obtenir une adaptabilité en hauteur
7 Concernant le curseur manuel : le pointeur est uniquement applicable à IE. .
1 styles CSS pour Firefox ie6 ie7
Maintenant, la plupart d'entre eux utilisent !important pour pirater, et le test pour ie6 et Firefox peut s'afficher normalement
Mais ie7 peut interpréter correctement !important, ce qui. la page ne s'affichera pas comme requis ! Trouvez une épingle
Un bon hack pour IE7 est d'utiliser "*+html". Maintenant, parcourez-le avec IE7 et il ne devrait y avoir aucun problème.
#1 { color: #333; } /* Moz */
* html #1 { color: #666 } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
Ensuite, la couleur de la police est affichée comme #333 sous Firefox, #666 sous IE6 et #999 sous IE7 .
2 Problèmes de centrage dans la mise en page CSS
Les principales définitions de style sont les suivantes :
body {TEXT-ALIGN: center;}
Explication :
Définissez d'abord TEXT-ALIGN : center dans l'élément parent ; cela signifie que le contenu de l'élément parent est centré pour IE, ce paramètre est suffisant ;
Il est à noter que si vous souhaitez utiliser cette méthode pour centrer la page entière, il est recommandé de ne pas pour définir dans un p, vous pouvez détacher plusieurs ps en séquence
Définissez simplement MARGIN-RIGHT: auto;MARGIN-LEFT: auto;
3 Différentes interprétations du modèle de boîte
#box{ width:600px; //for ie6.0- width:500px //for ff+ie6.0}
# box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0->
4 Double généré par flottant c'est-à-dire la distance
#box{ float:left; width:100px; margin:0 0 0 100px; //Dans ce cas, IE générera une distance de 200px display:inline; //Ignorer le float}
Détails ici. regardez les 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 de bloc les caractéristiques de l'Inline) ; element sont : il est sur la même page que les autres éléments. Sur la ligne,... ne peut pas être contrôlé (éléments en ligne);
#box{ display:block; //Peut simuler des éléments en ligne en tant qu'éléments de bloc. display:inline; //Réaliser un arrangement sur la même ligne Effet display:table;
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. Cela posera un gros problème. Si vous utilisez uniquement la largeur et la hauteur,
ces deux valeursne changeront pas dans un navigateur normal. Si vous utilisez uniquement min-width et min-height, cela équivaut à ne pas le faire. définir la largeur et la hauteur sous IE élevé.
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; ;}
6 Largeur minimale de la page
min-width est une commande CSS très pratique Elle peut spécifier que la largeur minimale de l'élément ne peut pas être inférieure à une certaine largeur, de sorte que la mise en page peut toujours être correcte. Mais IE ne le reconnaît pas,
et il traite en fait la largeur comme la largeur minimale. Pour que cette commande fonctionne sur IE, vous pouvez mettre un
sous la balise
, puis spécifier une classe pour p :7 Effacer les flottants
.hackbox{ display:table; //Affiche l'objet sous forme de table au niveau de l'élément de bloc} ou .hackbox{ clear:both;}
Ou ajoutez : after (Pseudo objet), définit le contenu qui apparaît après l'objet, généralement utilisé en conjonction avec le contenu. IE ne prend pas en charge ce pseudo-objet, et les navigateurs non-Ie le prennent en charge
Cela n'affecte donc pas les navigateurs IE/WIN. . La chose la plus gênante à ce sujet...#box:after{ content: "."; display: block; height: 0; un bug de 3 pixels
L'objet de gauche flotte, le côté droit est positionné en utilisant la marge gauche du patch extérieur et le texte à l'intérieur de l'objet de droite aura un espacement de 3 pixels par rapport à la gauche.
#box{ float :left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; Cette phrase est la clé}
Code HTML
9 sélecteur d'attribut (ceci n'est pas considéré comme compatible, c'est un bug de masquage du CSS)
p[id]{}p[id]{}
Ceci concerne les versions IE6.0 et IE6 inférieures à .0. Les fonctions de FF et OPeraIl existe encore des différences entre les sélecteurs d'attributs et les sous-sélecteurs. La portée des sous-sélecteurs est réduite dans la forme, tandis que la portée. des sélecteurs d'attributs est relativement grand, comme p[id ], toutes les balises p avec des identifiants sont du même style.
10 Problème de cache-cache IE
Lorsque l'application p est complexe, il y a des liens dans chaque colonne, p, etc. À ce stade, des problèmes de cache-cache ont tendance à se produire.
Certains contenus ne peuvent pas être affichés. Lorsque la souris sélectionne cette zone, on constate que le contenu est bien sur la page.Solution : utilisez l'attribut line-height pour #layout ou utilisez une hauteur et une largeur fixes pour #layout. Gardez la structure de la page aussi simple que possible.
11 Non-adaptation de la hauteur
La non-adaptation de la hauteur signifie que lorsque la hauteur de l'objet de la couche interne change, la hauteur de la couche externe ne peut pas être automatiquement ajustée, en particulier lorsque l'objet de la couche interne utilise
marge ou heure paddign.Exemple :
Contenu dans p objet
FF : après avoir défini le remplissage, p augmentera la hauteur et la largeur, mais pas IE, vous devez donc utiliser !important pour définir une hauteur et une largeur supplémentaires
FF : !important est pris en charge, mais IE l'ignorera, disponible ! important Définissez spécialement le style pour FF pour résoudre le problème de centrage vertical de
p : vertical-align:middle Augmentez l'espacement des lignes à la même hauteur que la hauteur entière de la ligne p ; :200px; Insérez ensuite le texte et il sera centré verticalement. L'inconvénient est qu'il est nécessaire de contrôler le contenu sans envelopper
curseur : le pointeur peut afficher la forme du doigt du curseur dans IE FF en même temps, la main ne peut être utilisée que dans IE
FF : le lien ajoute une bordure et une couleur d'arrière-plan, et doit définir le display: block et définir float: left pour garantir l'absence de sauts de ligne. En ce qui concerne la barre de menus, définir la hauteur d'une barre de menus permet d'éviter la dislocation de l'affichage du bord inférieur. Si la hauteur n'est pas définie, vous pouvez insérer un espace dans la barre de menus. Petite collection de solutions de compatibilité XHTML+CSS
Ici. Il y a de nombreux avantages à utiliser l'architecture XHTML+CSS, mais il y a effectivement quelques problèmes, que ce soit en raison d'une utilisation peu compétente ou d'une réflexion peu claire, je vais d'abord écrire certains des problèmes que j'ai rencontrés ci-dessous pour éviter à tout le monde de regarder autour de moi ^^
1. Dans Mozilla L'interprétation du modèle BOX dans Firefox et IE est incohérente, ce qui entraîne une différence de 2 pixels Solution :
p{margin:30px!important;margin:28px;}
.Notez que l'ordre de ces deux marges ne doit pas être écrit. Au contraire, selon Ajie, l'attribut !important n'est pas reconnu par IE, mais d'autres navigateurs le peuvent. Donc il est en fait interprété comme ceci sous IE :
p{maring:30px;margin:28px>
Si vous répétez la définition, elle sera exécutée selon la dernière, donc vous ne peut pas simplement écrire margin:XXpx!important ;
2. L'interprétation BOX de IE5 et IE6 est incohérente. La largeur de p{width:300px;margin:0 10px 0 10px;}p sous IE5 sera interprétée. comme 300px-10px (remplissage à droite) -10px (remplissage à gauche) La largeur finale de p est de 280px, tandis que sur IE6 et d'autres navigateurs, la largeur est calculée comme 300px+10px (remplissage à droite) + 10px (remplissage à gauche) = 320px. Pour le moment, nous pouvons apporter les modifications suivantes
p{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
, à propos de ça/**/ Je ne comprends pas très bien ce que c'est, je sais seulement que IE5 et Firefox prennent en charge. mais IE6 ne le fait pas. Si quelqu'un comprend, faites-le moi savoir, merci ! :)
3. La balise ul a une valeur de remplissage par défaut dans Mozilla, mais dans IE seule margin a une valeur, alors définissez-la d'abord
ul{margin:0;padding:0 ;}
peut résoudre la plupart des problèmes
4. Concernant les scripts, l'attribut de langue n'est pas pris en charge dans xhtml1.1. Il vous suffit de changer le code en
< type=" text/java">
C'est tout
7. 10 compétences CSS que vous ne connaissez peut-être pas
1. Règles d'abréviation des attributs de police CSS
Généralement, voici comment définir les attributs de police avec CSS :
font-weight:bold;
font-style:italic;
font-varient:small-caps
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
Mais ça peut également les écrire tous sur une seule ligne :
police : gras italique petites majuscules 1em/1,5em verdana,sans-serif ;
Super ! Juste une mise en garde : cette méthode raccourcie ne fonctionne que lorsque les propriétés font-size et font-family sont spécifiées. De plus, si vous ne définissez pas font-weight, font-style et font-variant, ils utiliseront les valeurs par défaut, alors gardez cela à l'esprit.
2. Utilisez deux classes en même temps
Généralement, une seule classe (Class) peut être définie pour un élément, mais cela ne signifie pas que deux ne peuvent pas être utilisées. En fait, vous pouvez faire ceci :
...
Donner à l'élément P deux classes en même temps, avec des espaces entre les deux Activer, de sorte que tous les attributs des classes text et side soient ajoutés à l'élément P. S'il y a un conflit entre les attributs des deux classes, celui défini ultérieurement prendra effet, c'est-à-dire que les attributs de la classe placés ultérieurement dans le fichier CSS prendront effet.
Supplément : Pour une pièce d'identité, vous ne pouvez pas écrire
...
ni l'écrire ainsi3. de bordure CSS La valeur par défaut
peut généralement définir la couleur, la largeur et le style de la bordure, tels que :
bordure : 3px solide #000
Cela affichera le bordure de 3 pixels de large, noire, ligne continue. Mais en fait, il vous suffit de préciser ici le style.
Si seul le style est spécifié, les autres attributs utiliseront les valeurs par défaut. Généralement, la largeur par défaut de Border est moyenne, ce qui est généralement égal à 3 à 4 pixels ; la couleur par défaut est la couleur du texte. Si cette valeur est correcte, il n'est pas nécessaire de définir autant de paramètres.
4. CSS pour l'impression de documents
De nombreux sites Web ont une version pour l'impression, mais en fait, cela n'est pas nécessaire car CSS peut être utilisé pour définir le style d'impression.
En d'autres termes, vous pouvez spécifier deux fichiers CSS pour la page, un pour l'affichage à l'écran et un pour l'impression :
La première ligne est destinée à l'affichage et la deuxième ligne est destinée à l'impression. Faites attention à l'attribut média.
Mais que faut-il écrire dans le CSS d'impression ? Vous pouvez le configurer de la même manière que vous concevriez du CSS normal. Lors de la conception, vous pouvez configurer ce CSS pour qu'il affiche le CSS afin de vérifier son effet. Peut-être utiliserez-vous la commande display: none pour désactiver certaines images décoratives et désactiver certains boutons de navigation. Pour en savoir plus, consultez l'article « Différences d'impression ».
5. Compétences en remplacement d'images
Il est généralement recommandé d'utiliser du HTML standard pour afficher du texte au lieu d'images, ce qui est non seulement plus rapide mais aussi plus lisible. Mais si vous souhaitez utiliser des polices spéciales, vous ne pouvez utiliser que des images.
Par exemple, si vous souhaitez créer une icône pour vendre des choses, vous utiliserez cette image :
Bien sûr, c'est possible, mais pour les moteurs de recherche, par rapport au texte normal, ils ont peu d'intérêt pour le texte de remplacement dans alt. C'est parce que de nombreux concepteurs mettent ici beaucoup de mots-clés pour tromper les moteurs de recherche. La méthode devrait donc être la suivante :
Mais de cette façon, il n'y a pas de police spéciale. Pour obtenir le même effet, vous pouvez concevoir du CSS comme ceci :
h1 { background: url(/blog/widget-image.gif) no-repeat; 🎜>
Attention à remplacer la hauteur de l'image par la hauteur de l'image réelle. Ici, l'image sera affichée comme arrière-plan, et comme l'indentation de -2000 pixels est définie pour le texte réel, ils apparaîtront 2000 points sur le côté gauche de l'écran et seront invisibles. Mais pour les personnes qui désactivent l’image, elles ne pourront peut-être pas la voir du tout, alors soyez prudent. 6. Une autre technique d'ajustement pour le modèle de boîte CSS Cet ajustement du modèle de boîte est principalement destiné aux navigateurs IE avant IE6. Ils comptent la largeur de la bordure et l'espace blanc comme largeur d'élément supérieure. . Par exemple : #box { width: 100px; border: 5px; padding: 20px }Appelez-le comme ceci : À l'heure actuelle, la largeur totale de la boîte doit être de 150 points, ce qui est correct sur tous les navigateurs, à l'exception des navigateurs IE antérieurs à IE6. Mais sur les navigateurs comme IE5, sa largeur totale est toujours de 100 points. Cette différence peut être gérée en utilisant la méthode d'ajustement Box inventée par les personnes précédentes. Mais le même objectif peut être atteint en utilisant CSS pour les rendre cohérents. #box { width: 150px } #box p { border: 5px; padding: 20px }Appelez comme ceci :...
De cette façon, quel que soit le navigateur, la largeur est de 150 points. 7. Alignez les éléments de bloc au centre Si vous souhaitez créer une page Web à largeur fixe et que vous souhaitez que la page Web soit centrée horizontalement, c'est généralement comme ceci :#content { width: 700px ; margin: 0 auto }Vous utiliseriez
C'est simple, mais pas suffisant, et les versions antérieures à IE6 n'afficheront pas cet effet. Modifiez le CSS comme suit :
body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }Cela centrera le contenu de la page Web Donc text-align: left a été ajouté au contenu. 8. Utilisez CSS pour gérer l'alignement verticalL'alignement vertical peut être facilement réalisé à l'aide de tables. Il suffit de régler l'unité de table en alignement vertical : au milieu. Mais cela ne sert à rien avec CSS. Si vous souhaitez définir une barre de navigation d'une hauteur de 2 em et que le texte de navigation soit centré verticalement, la définition de cet attribut est inutile.
Qu'est-ce que la méthode CSS ? Au fait, définissez la hauteur de ligne de ces mots sur 2em : line-height : 2em et c'est tout.
9. Positionnement du CSS dans un conteneur
L'un des avantages du CSS est que vous pouvez positionner un élément arbitrairement, même dans un conteneur. Par exemple, pour ce conteneur :
#container { position: relative }
De cette façon, tous les éléments du conteneur seront positionnés relativement. Vous pouvez l'utiliser comme ceci :
.Si vous souhaitez le positionner à 30 points à partir de la gauche et à 5 points du haut, vous pouvez faire ceci :
#navigation { position: absolu; left: 30px; top: 5px >
Bien sûr, vous pouvez aussi faire cela. :
marge : 5px 0 0 30px
A noter que l'ordre des 4 nombres est : haut, droite, bas, gauche. Bien sûr, il est parfois préférable de privilégier le positionnement plutôt que les marges.
10. La couleur de fond qui va directement en bas de l'écran
ne peut pas être contrôlée par CSS dans le sens vertical. Si vous souhaitez que la barre de navigation aille directement en bas de page comme la barre de contenu, il est très pratique d'utiliser un tableau, mais si vous n'utilisez que du CSS comme ceci :
#navigation { background: blue ; width: 150px }
Une barre de navigation plus courte n'ira pas directement vers le bas, elle se terminera lorsque le contenu se terminera à mi-chemin. Ce qu'il faut faire?
Malheureusement, la seule façon de tricher est d'ajouter une image d'arrière-plan à la colonne la plus courte, avec la même largeur que la largeur de la colonne, et de lui donner la même couleur que la couleur d'arrière-plan définie.
body { background: url(/blog/blue-image.gif) 0 0 répétition-y >
Vous ne pouvez pas les utiliser comme unité pour le moment, car dans ce cas, une fois le lecteur change la taille de la police, cette astuce sera révélée, seuls les px peuvent être utilisés.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
