problème en affichage: inline et affichage: inline-block

Question

j'ai un problème en affichage: inline et affichage: inline-block ....... comment devrais-je définir les deux en css ... ie affichage: inline pour à-dire et l'affichage: inline-block pour ff et chrome ....

Answer 1

Vous pouvez utiliser Conditional Comments pour charger un fichier CSS avec des remplacements qui ne seront chargés que par Internet Explorer. Par exemple:

<!-- main stylesheet for all browsers (uses display: inline-block) --> 
<link href="main.css" media="screen" rel="stylesheet" type="text/css" /> 

<!-- overrides for IE 7 and earlier (uses display: inline where necessary) --> 
<!--[if lte IE 7]> 
    <link href="main-ie.css" media="screen" rel="stylesheet" type="text/css" /> 
<![endif]--> 

<!-- overrides for IE 6 and earlier (uses display: inline where necessary) --> 
<!--[if lte IE 6]> 
    <link href="main-ie6.css" media="screen" rel="stylesheet" type="text/css" /> 
<![endif]--> 

Answer 2

Voici un bon aperçu des hacks navigateur CSS: http://brainfart.com.ua/post/css-hacks-overview/

Je suppose que l'article 4, 8 ou 9 pourrait demander votre cas.

Answer 3

Le problème avec IE est qu'il ne prend pas correctement en charge "inline-block". Par conséquent, pour compenser cela, vous devez faire flotter l'élément. Le conteneur pour les éléments flottants doit donc être effacé, en utilisant "clear: both" à moins que tout ne soit de taille fixe, comme les liens de menu.

Je préfère de loin trouver ce qui n'est pas supporté dans chaque navigateur que d'écrire des feuilles de style individuelles pour chacun.

Answer 4

IE7 et les versions suivantes ne prennent pas en charge le blocage en ligne. Mais il existe une solution de contournement simple. Comme un bloc en-ligne est - simplement dit - un élément qui se comporte comme un bloc mais s'aligne comme en ligne, il suffit de dire à IE qu'il s'agit d'un élément en ligne avec une mise en page (un idiossincracy IE). Donc:

.el { display:inline-block; *display:inline; *zoom:1; } 

Et voilà! Vraiment simple. Vous pouvez aussi bien utiliser des commentaires conditionnels et éviter le piratage des étoiles. J'utilise personnellement la déclaration HTML de Paul Irish (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) puis je cible spécifiquement IE7 et ci-dessous à l'aide:

.el { display:inline-block; } 
.lt-ie8 .el { display:inline; zoom:1; }