Exemple d'explication de la méthode d'écriture de compatibilité CSS

Moteurs courants du noyau du navigateur et applications spécifiques :

Trident : IE

Gecko : Firefox

webkit : Safari, Google Chrome, Travel 3, Cheetah, Baidu ; ;

Presto : Opera - Opera mini

Ordre d'écriture : firefox, IE8, IE7, IE6

IE6:*,_

IE7:*,+

IE8:9,

IE : les versions inférieures à ie7 ne prennent pas en charge les coins arrondis.
FF : -moz-border-radius:4px

Bogue du navigateur
Bogue de la double marge d'IE

La marge définie pour un div défini pour flotter sous IE sera doublée. Il s'agit d'un bug qui existe dans ie6.

Solution : Ajouter display:inline ;

Flottant

Génération de texte IE flottante DIV 3 Bug Pixel
Le l'objet de gauche flotte et le bord droit 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 : gauche; largeur:800px;}
#gauche{ float:gauche; largeur:50%;}
#droite{ largeur:50%;}
*html #gauche{ margin-right:-3px ; //Cette phrase est la clé}

>

Problème de cache-cache IE Lorsque l'application div est complexe, dans chaque colonne Il y a des liens, des DIV, etc. Il est facile que des problèmes de cache-cache se produisent à ce moment-là.
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.

Attribut privé de mise en page IE

En tant que div wrapper externe, ne définissez pas la hauteur Pour que la hauteur s'adapte automatiquement, elle. doit être à l'intérieur du wrapper.Ajouter overflow:hidden; Lorsqu'une boîte contenant float est incluse, l'adaptation automatique de la hauteur n'est pas valide sous IE. À ce stade, l'attribut privé de mise en page d'IE doit être déclenché (le maléfique IE !) Vous pouvez utiliser. zoom:1 ; pour y parvenir.

.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

Composition

Nous utilisons La description CSS la plus courante peut être float:left. Parfois, nous devons créer un arrière-plan unifié derrière le div float dans la colonne n, par exemple :

;

Nous voulons définir l'arrière-plan de la page sur bleu pour que la couleur d'arrière-plan des trois colonnes soit bleue, mais nous constaterons qu'avec le centre gauche, étirez vers le bas. , mais la page conserve en fait la même hauteur. Le problème est que la page n'a pas d'attribut float et que notre page ne peut pas être définie sur float car elle doit être centrée, nous y ajoutons donc un élément parent, page, à. devenir grand-père;

Non-adaptation à la hauteur

La non-adaptation à la hauteur signifie que lorsque la hauteur de l'objet intérieur change, la hauteur de la couche externe ne peut pas être automatiquement ajusté, en particulier lorsque l'objet intérieur lors de l'utilisation de margin ou paddign. Exemple :
#box { }
#box p {margin-top : 20px; margin-bottom : 20px; text-align:center }

Contenu dans l'objet p

Technique de solution : Ajoutez 2 objets div vides au-dessus et en dessous de l'objet CSS : .1{ hauteur : 0px;overflow:hidden;} Ou ajoutez l'attribut border au DIV.

Pourquoi y a-t-il un trou sous l'image sous IE6

Il existe de nombreuses techniques pour résoudre ce BUG Vous pouvez modifier la mise en page du html, ou définissez l'img sur display: block ou définissez l'attribut vertical-align sur vertical-align:top 　bottom 　middle 　text-bottom peut être résolu

Le bug CSS d'IE

Après avoir ajouté des espaces à p:first-letter et {font-size:300%}, c'est-à-dire p:first-letter {font-size:300%}, l'affichage devient normal. Mais le même code semble normal sous FireFox. Logiquement parlant, la façon d'écrire p:first-letter{font-size:300%} est correcte. Alors quel est le problème ? La réponse est le trait d'union "-" dans la pseudo-classe. Il y a un BUG dans IE Lors du traitement des pseudo-classes, si le nom de la pseudo-classe contient un trait d'union "-", le nom de la pseudo-classe doit être suivi d'un espace, sinon la définition de style sera invalide. Dans FF, il peut être traité normalement avec ou sans espaces.

Le div est déjà centré lorsque margin-left et margin-right sont définis sur auto. IE ne fonctionne pas. IE doit d'abord définir le corps pour qu'il soit centré. : center; ceci dans l'élément parent Cela signifie que le contenu de l'élément parent est centré.

Centrage vertical=>Problème d'habillage du contenu

Un div d'une hauteur de 30px affiche le coin supérieur gauche par défaut. Si vous souhaitez le centrer verticalement, vous pouvez ajouter un style line-height:30px; Si vous voulez qu'il soit en bas, modifiez line-height

Plus la valeur est grande, plus elle sera basse. Afin d'éviter qu'elle n'éclate, vous devez donner un autre style overflow:hidden;

Définissez trois styles pour les objets au niveau du bloc afin de résoudre les valeurs par défaut du navigateur : largeur et hauteur dépassées

Conseils pour afficher le contenu avec des points de suspension après le contenu dépasse la longueur en LI

Cette technique est applicable aux navigateurs IE et OP

li {

largeur : 200px
espace blanc:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: caché;
Pourquoi IE ne peut-il pas définir de barres de défilement dans les standards du Web ? Couleur La solution est de remplacer le corps par du HTML

html { scrollbar-face-color:#f6f6f6;

scrollbar- highlight-color:#fff;

scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:# eeeeee; scrollbar-arrow-color:#000;
scrollbar-track-color:#fff
scrollbar-darkshadow-color
}




Pourquoi ne puis-je pas définir un conteneur d'une hauteur d'environ 1px Ce problème sous IE6 est causé par la hauteur de ligne par défaut, et il existe de nombreuses techniques de résolution, telles que : débordement :hidden zoom:0.08 line-height:1px

initialisation CSSL'attribut margin est valide pour IE et l'attribut padding est valide pour FireFox.

corps,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{marge :0;padding:0;}

1. img{border:0px;}

2. ul {margin:0px;padding:0px;} / 

3. ul li {list-style:none;}

4. /* Clear Fix */

   .clearfix:after {

   contenu : »;
affichage:bloc;

hauteur:0;

clair: les deux;
visibilité:caché
}
.clearfix {
affichage; :inline-block;
}
/* Masquer depuis IE Mac */
.clearfix {display:block;}
/* Terminer le masquage depuis IE Mac */
/* fin de clearfix */

Ou définissez-le comme ceci : .hackbox{ display:table; //Affiche l'objet sous forme de table au niveau des éléments de bloc}

Trop de références :