L'attribut CSS inline-block est compatible avec divers navigateurs et constitue la solution au problème de l'écart horizontal

Ce chapitre vous présentera l'attribut CSS inline-block compatible avec tous les navigateurs et la solution au problème de l'écart horizontal. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Description de l'attribut inline-block :

Après avoir défini cette valeur, l'objet lui-même est rendu en tant qu'objet en ligne , mais l'objet Le contenu à l'intérieur est rendu sous forme de boîtes de bloc. En d’autres termes, l’élément avec cette valeur définie est équivalent à un élément de boîte en ligne pouvant contenir des boîtes de bloc. Bien qu'IE6 et 7 puissent prendre en charge le bloc en ligne, à leurs yeux, display:inline-block n'est qu'une condition de déclenchement de la mise en page, et non quelque chose de spécifié par le W3C. Cependant, nous pouvons simplement utiliser la mise en page d'IE pour simuler l'effet de display:inline-block.

Solutions de compatibilité de blocs en ligne pour différents navigateurs

Il existe deux méthodes, toutes deux déclenchent d'abord la mise en page IE, puis définissent l'affichage : inline, laissez l'élément block lui-même être rendu comme un objet inline, comme suit :

1. Parmi tous les attributs qui peuvent déclencher la mise en page, après avoir exclu position:absolute et float, ainsi que width et height, le les seuls qui peuvent être utilisés sont display:inline-block, comme suit :

fn-ib{display:inline-block;}fn-i{*display:inline;}

Notez que les deux affichages doivent être placés dans deux instructions CSS l'une après l'autre pour avoir un effet If display:inline-. Le bloc est défini en premier, puis l'affichage est défini. Revenir en ligne ou en bloc, la mise en page ne disparaîtra pas.

2. La première méthode consiste à le mettre dans deux instructions CSS. Parfois, vous pouvez faire une erreur si vous ne faites pas attention. La mise en page d'IE a également zoom:value. >

fn-ibz{display:inline-block;*display:inline;*zoom:1}

De ce qui précède, nous pouvons voir que IE6 et 7 prennent en charge l'attribut inline-block, mais ils ne réalisent pas l'effet W3C, nous utilisons donc layout et display:inline pour simuler l'effet du inline-block attribut.

D'accord, il existe désormais une solution au problème du blocage en ligne dans divers navigateurs. La solution suivante est : regardez les exemples suivants dans différents navigateurs :

<. 🎜>L'écart entre les éléments inline-block dans les différents navigateurs est la nature même de l'inline, pas un bug

Ensuite, nous avons constaté que dans les navigateurs prenant en charge l'attribut display:inline-block, les éléments inline et block s'affichent :inline -block produira des espaces horizontaux ; et dans IE67 et IE (Q), il existe deux situations après la simulation de display:inline-block : les éléments de bloc après la simulation n'ont pas d'espace, tandis que les éléments en ligne ont des espaces. Pourquoi? Voici un autre point de connaissance : les éléments en ligne sont disposés avec des espaces par défaut. Par conséquent, le phénomène ci-dessus s'explique comme suit :

Navigateurs qui prennent en charge l'attribut display:inline-block, l'élément lui-même est équivalent à l'élément inline, il y a donc des lacunes dans les navigateurs modernes dans la solution simulée ; Parce que bien que la définition de display:inline sur un élément block puisse le faire disposer horizontalement comme des éléments inline, l'élément block est toujours un élément block et ne deviendra pas vraiment un élément inline, il n'y aura donc pas d'espace.

La cause première des espaces est que les caractères tels que les sauts de ligne, les espaces, les tabulations, etc. en HTML produisent des caractères d'espacement.

Solution au problème d'écart horizontal entre les blocs en ligneNous savons ci-dessus que la cause première de l'écart est le caractère de nouvelle ligne en HTML , Les caractères tels que les espaces et les tabulations. Si nous supprimons les espaces entre les étiquettes, n'y aura-t-il aucun problème ? Le code est donc le suivant :

Le code HTML est le suivant :

Rendu :

<div class="parent">
    <strong class="fn-ibz">内联元素</strong><strong class="fn-ibz">
    内联元素</strong><strong class="fn-ibz">
    内联元素</strong><strong class="fn-ibz">
    内联元素</strong>
</div>
<div class="parent">
    <div class="fn-ibz">块元素</div><div class="fn-ibz">
    块元素</div><div class="fn-ibz">
    块元素</div><div class="fn-ibz">
    块元素</div>
</div>

Changer la structure DOM en résoudre le problème du bloc en ligne Le problème de l'écart entre

J'ai traité le code DEMO ci-dessus, nous ne pouvons donc pas voir l'écart. Mais voici le problème :

S'il est statique, il n'y a vraiment pas de gros problème à faire cela. Et s'il est généré directement en arrière-plan ? Ou à l'avenir, les collègues de maintenance verront comment le code est écrit de cette façon et le modifieront. Utiliser CSS pour résoudre ce problème reste donc le meilleur moyen. Lorsque j'ai vu cette situation pour la première fois, ma première réaction a été d'utiliser des marges négatives pour la résoudre. Plus tard, après avoir découvert la cause profonde de l'écart, j'ai senti que même si la méthode des marges négatives pouvait résoudre le problème, elle ne donnait pas le droit. La cause de l'écart était les sauts de ligne entre les caractères HTML, les espaces, les tabulations et autres caractères, et les écarts changeront avec les changements d'attributs tels que la taille de la police. Vous pouvez donc utiliser CSS pour contrôler la taille des caractères afin d'en trouver un. Donc, en me référant à la solution dans YUI3, j'ai obtenu le code suivant :

Rendu :

.f-w-p-parent{
    font-size:0;
    letter-spacing:-4px;
    *letter-spacing:normal;
    *word-spacing:-1px;
}
.f-w-p-inner{
    font-size:12px;
    letter-spacing:normal;
    *word-spacing:normal;
    vertical-align: top;
}

Solution pour l'écart de bloc CSSinline

Ensuite on analyse la fonction de chaque ligne de code :

1. Le rôle de la taille de police : puisqu'il est causé par les caractères, bien sûr, définissez leur taille de police sur 0, puis redéfinissez la taille de police dans l'élément à sa taille d'origine. À l'exception d'IE6, 7 et d'autres navigateurs dotés de versions inférieures de Chrome et Safari, l'espace entre les blocs en ligne disparaît à cette étape (les versions inférieures de Chrome ne peuvent pas permettre au texte de se développer et de se contracter librement après avoir défini font-size:0, ce n'est donc pas le cas. recommandé)

2. Le rôle du word-spacing : En mode IE6, 7 et IE (q), il y a toujours un espacement de 1px, puis on utilise word-spacing : -1px à résoudre (entre les mots La distance entre eux n'est utile que pour l'anglais, le chinois n'a pas la notion de mots), puis ramène l'élément à la normale. Bien sûr, il est également possible d'utiliser margin:0 0 0 -1px (il parait qu'il y a moins de code...)

3. Le rôle de l'espacement des lettres : seulement faible les versions de Chrome et Safari sont laissées, l'espacement des lettres consiste à ajuster l'espacement entre les mots, car l'espacement des lettres, la taille de la police, la famille de polices et même les différents navigateurs sont différents, donc selon le "Tableau de données sur la relation entre Espacement des lettres et taille de police/police" En définissant les données ci-dessus, l'espace peut être annulé. Ensuite, comme l'espacement des lettres et l'espacement des mots sont faciles à causer des problèmes ensemble, j'ai ajouté *letter-spacing:normal This code;

4. Le rôle de vertical-align:top : ce dernier n'a rien à voir avec les espaces. Le réglage de vertical-align:top consiste à aligner les éléments du bloc en ligne avec la ligne de base supérieure. L'attribut vertical-align n'est valide que sur les éléments inline et inline-block.
   

Avantages du bloc en ligne

Il n'est pas mentionné ici que la disposition en bloc en ligne enregistre la navigation par rapport à la disposition flottante Pour réduire les ressources du serveur, nous devons abandonner la disposition flottante et adopter la disposition en blocs en ligne (et le site officiel ne le dit pas). Après tout, l'apparence d'une chose a sa signification, et la disposition flottante l'est aussi). méthode de mise en page la plus reconnue. Encore une fois, après une analyse détaillée de la situation spécifique, il est clair que la structure de mise en page flottante est plus claire, mais vous devez utiliser le bloc en ligne et ajouter beaucoup de code redondant, même si la mise en page en bloc en ligne est vraiment la moindre. consommateur de ressources comme légendaire, mais l'augmentation de votre code html ne consommerait-elle pas également des ressources ?

Même s’il y en a, je ne pense pas que ce soit grand. Donc, si vous utilisez le positionnement absolu, utilisez le positionnement absolu. Si vous utilisez le flottant, utilisez le flottant. Si vous rencontrez une situation où l'utilisation du bloc en ligne peut mieux résoudre le problème, utilisez-le avec audace. Après tout, le bloc en ligne présente encore certains avantages par rapport au positionnement flottant et absolu.

1. Vous pouvez utiliser l'alignement vertical et l'alignement du texte pour obtenir un alignement vertical, horizontal, des deux côtés, de la ligne de base, etc., et il est également adaptatif.

2. Pour des raisons qui lui sont propres, il est particulièrement adapté à une mise en page fluide. La hauteur et la largeur n'ont pas besoin d'être fixées.

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!