Attribut de bloc en ligne pour la compatibilité de simulation_Experience Exchange

De nos jours, il y a de plus en plus de demandes pour l'utilisation de l'attribut inline-block. Malheureusement, seuls Firefox3 bêta, IE8 bêta, Opera et Safari prennent en charge l'attribut inline-block (Remarque : à l'origine, seuls Opera et Safari le prenaient en charge), mais IE6 et IE7 peuvent transmettre Trigger hasLayout pour simuler. 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 Display:inline-" de Qin Ge. bloc").

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 à prédire. qu'il y aura de nombreux problèmes, et relativement parlant, -moz-inline-stack se comporte davantage comme un bloc en ligne, qui peut être testé dans Firefox3. Cependant, il y aura également 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;, les liens qu'il contient ne seront pas cliquables dans Firefox. . Cela nécessite Use position:relative;

Le code final que nous avons simulé est le suivant :

Copiez le code Le code 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 /* Firefox's; attribut privé, également disponible Utilisez -moz-inline-box */

zoom:1; /*trigger hasLayout sous IE*/
*display:inline; /*Une fois hasLayout déclenché sous IE, paramètre l'élément block à inline rendra display:inline similaire à display:inline-block*/

text-indent:-9999px
*text-indent:0
font-size:0; ;
line -height:0; /* Si vous devez masquer du texte, vous pouvez utiliser ces quatre attributs */
/*De plus, vous pouvez également utiliser une méthode plus simplifiée pour masquer le texte ci-dessus : line -height: super large value; font-size:0 ; */

overflow:hidden; /* Masquer le contenu du débordement */

vertical-align:middle /* Centrer verticalement la ligne; , pour l'écart relativement grand d'Opera */

largeur :? px; /*? Pour toute valeur non automatique*/
hauteur :? px; /*? Pour toute valeur non automatique*/