Il y a un an, il n'y avait pas d'article sur l'attribut de blocage en ligne sur Internet. Afin de faciliter tout le monde pour mieux comprendre l'attribut, j'ai résumé et compilé l'article "Defth: compréhension approfondie de l'affichage: bloc en ligne".
Maintenant, il existe une demande croissante pour l'application des attributs de blocage en ligne. Malheureusement, seuls Firefox3 Beta, IE8 Beta, Opera et Safari prennent en charge les attributs de blocage en ligne (Remarque: Seuls l'opéra et le safari les soutiennent), mais IE6 et IE7 peuvent simuler en déclenchant Haslayout. Firefox2 a -moz-inline-box et -moz-inline-stack private attributs (la comparaison de ces deux attributs est citée à partir de "deux exemples d'application de l'affichage: le bloc en ligne").
Dans les applications réelles, la boîte-boz-inline aura des problèmes tels que l'alignement entre les éléments. Bien que Firefox ait également une propriété privée -moz-box-align pour aider à résoudre le problème d'alignement, il est toujours difficile de prédire de nombreux problèmes. Relativement parlant, -moz-inline-stack, fonctionne plus comme le bloc en ligne, qui peut être testé dans Firefox3. Cependant, il y aura également un bogue lors de l'utilisation de -moz-inline-stack. Si l'élément extérieur d'un écran: -moz-inline-stack; est affiché: en ligne; qui rendra les liens contenus dans Firefox Unlicable, et cela doit être résolu par la position: relative ;.
Le code final que nous avons simulé est le suivant:
Affichage: bloc en ligne; / * Firefox3 Beta, IE8 Beta, Opera, Safari Support, Haslayout déclenchant l'élément en ligne sous IE * /
Affichage: -moz-inline-stack; / * Attributs privés de Firefox, vous pouvez également utiliser -moz-inline-box * /
Zoom: 1; / * IE Trigger Haslayout * /
* Affichage: en ligne; / * Une fois que Haslayout est déclenché sous IE, la définition de l'élément de bloc en intention fera l'affichage: Effet en ligne similaire à l'affichage: bloc en ligne * /
Texte-indent: -9999px;
* Indent texte: 0;
taille de police: 0;
hauteur de ligne: 0; / * Si vous souhaitez masquer du texte, ces quatre attributs peuvent être utilisés * /
/ * En outre, le texte caché ci-dessus peut être masqué, et une méthode plus simplifiée peut être utilisée: la hauteur de ligne: super grande valeur; taille de police: 0; * /
débordement: caché; / * Masquer le contenu de débordement * /
Adigne vertical: milieu; / * Cenation verticale dans la ligne, pour la plus grande déviation de l'opéra * /
largeur:? PX; / *? est toute valeur non auto * /
hauteur:? PX; / *? est toute valeur non auto * /