css affiche la méthode d'écriture du problème de compatibilité des blocs en ligne

J'ai trouvé un bug lorsque j'écrivais la mise en page aujourd'hui. Si je ne le fais pas, je ne pourrai pas obtenir l'effet escompté et je ne pourrai pas être organisé sur deux lignes. Il s'avère que IE6 et IE7 ne le font pas. support display:inline-block Vous devez donc utiliser le hack CSS. Compatibilité :

IE6 et IE7 ne reconnaissent pas les blocs en ligne mais peuvent déclencher des éléments de bloc.

D'autres principaux navigateurs prennent en charge le blocage en ligne.

Méthodes pour résoudre la compatibilité de IE6 et IE7 :

1. Définissez d'abord inline-block pour déclencher l'élément block, qui a les caractéristiques de mise en page, puis définissez display:inline pour le rendu. l'élément block Élément Inline , les caractéristiques de mise en page ne disparaîtront pas pour le moment.

2. Définissez display:inline directement et utilisez zoom:1 pour déclencher la mise en page.

Compatible avec tous les navigateurs est :

Code CSSCopier le contenu dans le presse-papiers

1. affichage :en ligne-bloc /* Navigateur moderne +IE6, 7 en ligne ; éléments */

2. *affichage :en ligne /* IE6, 7 éléments de bloc */ ;

3. *zoom:1

Ce qui suit est une brève introduction :

1, Exemple de démonstrationEffet



2. Quelle est la fonction de display:inline-block
Utilisation display:inline L'attribut -block permet aux éléments en ligne ou aux éléments de bloc de devenir des éléments de bloc en ligne. Pour le dire simplement et directement, vous pouvez définir sa propre largeur et hauteur sans ajouter l'attribut float, et en même temps, l'élément peut être. facilement affiché au centre de l'élément parent !


3. Quand display:inline-block sera-t-il utilisé ?
Dans la mise en page d'un site Web, les éléments en ligne tels que les éléments span ou block sont souvent utilisés dans les éléments enfants. .li et le nombre de balises est variable, et nous souhaitons que ce bloc soit toujours affiché au centre peu importe leur nombre (la largeur hors tout des éléments enfants est variable) ! C'est là que display:inline-block devient utile !


4. ie6/7 prend-il en charge l'attribut display:inline-block ?
Définissez l'attribut display:inline-block sur l'élément inline et constatez que l'effet d'affichage dans IE6 et IE7 est cohérent avec les autres navigateurs, mais le fait est que IE7 et les versions inférieures
ie navigation L'appareil ne prend pas en charge l'attribut display:inline-block ! L'explication correcte est "L'utilisation de l'attribut inline-block déclenchera la mise en page sous IE, donc la largeur et la hauteur définies sur l'élément prendront effet, donc l'effet d'affichage sera cohérent avec les autres navigateurs", mais ce n'est pas dit. que IE6/7 prend en charge display:inline-block!

5. Les éléments en ligne doivent uniquement être définis avec display:inline-block, et l'effet d'affichage sera le même dans tous les navigateurs. Comment obtenir l'effet de display:inline-block pour les éléments de bloc dans IE7. ? ?

Sous IE, display: inline-block déclenche uniquement la disposition de l'élément. Par exemple, définir display: inline-block sur p ne peut garantir que p a les caractéristiques d'un élément de bloc (vous pouvez définir la largeur, la hauteur, etc.), mais cela provoquera toujours des sauts de ligne. Ensuite, vous devez définir display: inline afin qu'il ne provoque pas de sauts de ligne. Écrivez display:inline-block;*display:inline; sur le même style. L'attribut inline-block ne déclenchera pas la mise en page de l'élément, nous devons donc ajouter *zoom:1 pour déclencher la mise en page

6. Comment les éléments de bloc IE7 peuvent-ils être compatibles avec la méthode d'écriture display:inline-block ?

Il existe 2 méthodes réellement efficaces :
Méthode 1 : définir directement l'élément de bloc à rendre en tant qu'objet en ligne (définir l'attribut display:inline), puis déclencher le disposition de l'élément de bloc (ex : zoom:1, etc.). Le code compatible avec différents navigateurs est le suivant : p {display:inline-block;*display:inline; *zoom:1;...}
Méthode 2 : Utilisez d'abord l'attribut display:inline-block pour déclencher le block element, puis Define display:inline pour restituer les éléments de bloc en tant qu'objets en ligne (deux affichages doivent être placés dans deux déclarations de style CSS pour être efficaces. Il s'agit d'un bug classique d'IE. Si display:inline-block est défini en premier, alors Ensuite, remettez l'affichage en ligne ou en bloc, et la mise en page ne disparaîtra pas). Le code est le suivant (... les autres contenus d'attribut sont-ils omis) : p {display:inline-block;...}p {*display:inline;}


7. éléments inline-block Comment résoudre les espaces blancs inutiles ?
affichage : Il y aura un espace blanc supplémentaire entre les éléments du bloc en ligne. C'est la caractéristique du bloc en ligne lui-même !
À proprement parler, ce n'est pas un BUG. Il peut être résolu en utilisant le paramètre
font-size
Articles connexes sur la résolution de l'espace blanc excessif entre les éléments display:inline-block : http://. www.jb51.net/css/ 76707.html

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!