Compatibilité de la production de pages Web d'attribut_HTML/Xhtml_Web en bloc en ligne

Il y a un an, il n'y avait pas d'article sur l'attribut inline-block sur Internet Afin de permettre à chacun de mieux comprendre cet attribut, j'ai résumé et compilé l'article « Affichage : compréhension approfondie de Inline-block ». à ce moment-là.
De nos jours, il existe une demande croissante pour l'utilisation de l'attribut inline-block. Malheureusement, seuls Firefox3 bêta, IE8 bêta, Opera et Safari prennent toujours en charge l'attribut inline-block (Remarque : à l'origine, seuls Opera et Safari le prenaient en charge. ), mais IE6, IE7 peuvent être simulés en déclenchant hasLayout. Firefox2 a les attributs privés -moz-inline-box et -moz-inline-stack (la comparaison de ces deux attributs est citée dans "Deux exemples d'application de l'affichage" de Qin Ge. :bloc-en-ligne").
Dans les applications réelles, -moz-inline-box aura des problèmes tels que l'alignement entre les éléments. Bien que Firefox ait également un attribut privé -moz-box-align pour aider à résoudre les problèmes d'alignement, il est encore difficile de prédire qu'il y en aura. Il y a de nombreux problèmes, et de manière relativement générale, -moz-inline-stack se comporte davantage comme un bloc en ligne, qui peut être testé dans Firefox3. Cependant, il y a un bug lors de l'utilisation de -moz-inline-stack; Si l'élément externe d'un élément display:-moz-inline-stack; est display:inline;, le lien qu'il contient ne sera pas cliquable dans Firefox. Utilisez position:relative; pour le résoudre.
Le code final que nous avons simulé est le suivant :
display:inline-block; /*Firefox3 beta, IE8 beta, Opera, support Safari, hasLayout qui déclenche des éléments en ligne sous IE*/
display:-moz-inline-stack /* Propriété privée de Firefox, You; peut également utiliser -moz-inline-box */
zoom:1; /*hasLayout est déclenché sous IE*/
*display:inline; /*Une fois hasLayout déclenché sous IE, définir l'élément de bloc sur inline rendra l'effet display:inline similaire à display : bloc en ligne */
text-indent:-9999px;
*text-indent:0;
font-size:0;
line-height:0 /* Si vous souhaitez masquer le texte, vous pouvez utiliser ces quatre attributs */
/*De plus, pour masquer le texte ci-dessus, vous pouvez également utiliser une méthode plus simplifiée : line-height : super large value ;
overflow:hidden; /* Masquer le contenu du débordement */
vertical-align:middle; /* Centrer verticalement la ligne, pour l'écart relativement important d'Opera */
largeur :? px; /*? Pour toute valeur non automatique*/
hauteur : ? px; /*? Pour toute valeur non automatique*/