Récemment, je construisais un nouveau site Web pour moi-même et j'ai trouvé quelques effets, mais j'ai rencontré quelques problèmes mineurs lors de la mise en œuvre, comme ce bloc en ligne. Heureusement, la plupart des problèmes ont été résolus, alors je les ai écrits pour les partager.
Lorsque nous créons des pages Web, nous souhaitons parfois qu'un élément soit capable de définir la largeur et la hauteur comme un bloc, et qu'il puisse également s'exécuter en continu comme un élément en ligne normal. Par exemple, l'endroit marqué par la ligne rouge sur l'image ci-dessous :
Habituellement, nous utilisons un code comme celui-ci pour obtenir un tel effet :
Exemple de code source
[www.downcodes.com] <a href="#"><img src="…."
Même si cela permet d’atteindre l’objectif, le code n’est toujours pas suffisamment raffiné ni suffisamment flexible. Idéalement, nous pouvons y parvenir avec uniquement le code suivant :
Exemple de code source
[www.downcodes.com] <a href="#">Yangliu.name</a>
Dans ce cas, nous devons spécifier la largeur, la hauteur et l'image d'arrière-plan pour la balise a. Cependant, l'attribut d'affichage par défaut de la balise a est en ligne, et la largeur et la hauteur ne sont pas valides. Et si display:block est défini sur a, bien que le problème de largeur et de hauteur puisse être résolu, l'élément brisera automatiquement les lignes et ne pourra pas obtenir l'effet dont nous avons besoin. Existe-t-il un moyen d'obtenir la même chose que la balise img, qui permet de définir la hauteur et la largeur sans rompre automatiquement la ligne ?
La réponse est oui. Opera et Webkit prennent en charge un affichage de propriété CSS2 : inline-block. En utilisant cet attribut, nous pouvons obtenir pleinement l'effet dont nous avons besoin sous Opera, mais cela ne fonctionnera pas sous d'autres navigateurs.
L'attribut display a également un affichage de valeur moins couramment utilisé : inline-table. L'utilisation de cette valeur peut également obtenir pleinement l'effet dont nous avons besoin. Cette propriété est correctement prise en charge par tous les navigateurs sauf IE, mais... enfin, encore une fois IE. Même si tous les développeurs Web détesteront cela face au CSS, abandonner IE équivaut à abandonner 70 % des utilisateurs, nous devons donc encore trouver d'autres solutions.
Je n'ai pas eu d'autre choix que de le rechercher sur Google et je l'ai trouvé. Comme indiqué dans cet article, si vous déclenchez d'abord hasLayout d'IE, puis définissez son display: inline, cet élément deviendra inline-block. De cette façon, nous pouvons profiter de cette fonctionnalité déraisonnable d'IE et la combiner avec du CSS ! Hacks, donnant des codes CSS compatibles avec différents navigateurs :
Exemple de code source
[www.downcodes.com] .element-classe {
display : -moz-inline-stack ; //Code Firefox uniquement
display: inline-block; //certains navigateurs standards
zoom : 1 ; //IE uniquement
*display : inline ; //Seul IE connaît ce code (CSS Hack)
}
Grâce à ce code, vous pouvez obtenir un bloc en ligne qui se comporte de manière cohérente dans différents navigateurs. Cependant, cette méthode présente un petit inconvénient, c'est-à-dire qu'elle ne peut pas passer la vérification CSS du W3C. Bien sûr, il est également très simple de réussir la vérification. Vous pouvez émettre une feuille de style avec l'attribut inline-table pour des navigateurs autres qu'IE et émettre un CSS IE Only distinct pour IE.
