[Résolu] Haslayout - inline-bloc - IE8

Bonjour à tous,

j'ai un pb assez notable. Habituellement, les bugs de rendu se produisent sur IE6 - IE7. Or dans mon cas, le pb de produit sur IE8.

Voici mon objectif:
- je souhaite limiter la taille d'un conteneur. Si le texte à l'intérieur est trop grand je souhaite que la fin du libellé soit remplacé par ... genre (bonjo...) pour bonjour
- tout ceci doit fonctionner sur IE7 - IE8 - MOZ

Mon problème:
- sur IE 7, mon contenu apparait bien et mes pointillés pas de souci , par contre sur IE8, plus rien ne s'affiche.
- Je sais très bien que c'est un pb de Haslayout de IE8. C'est le inline-block que j'écris qui lui pose problème. Sauf que j'en ai besoin

Mes tests:
- j'ai essayé

display: inline; zoom:1;

Ca fonctionne bien mes éléments réapparaissent mais mon max-width ne fonctionne plus sur IE. Forcément ce n'est plus un bloc.

Voici mon code, si quelqu'un a une idée de patch pour IE ca serait assez cool.

.labelDate {
	display:inline-block;
	text-overflow:ellipsis;
	vertical-align: middle;
	white-space: nowrap;
	overflow: hidden;
        max-width: 35px;
}

.encartNav .label {
    min-width: 40px;
}

.label {
    color: black;
    float: left;
    text-align: left;
}

<div class="label divfloat" ><span class="labelDate" title="toto">toto</span></div>

Je vous remercie par avance pour votre aide.

Missa
Modifié par missatorito (21 Feb 2012 - 16:38)

Bonjour,

Quelques confusions dans ton message.

missatorito a écrit :
tout ceci doit fonctionner sur IE7 - IE8 - MOZ

Les parts de marché de Chrome sont très largement supérieures à celles d'IE7. Celles de Safari sont légèrement supérieures à celles d'IE7. Donc si tu veux garder un nombre de navigateurs supporté faible, laisse tomber le support d'IE7 et teste au moins avec WebKit (Chrome/Safari).

missatorito a écrit :
mes pointillés

On parle de points de suspension. À noter qu'il y a une différence entre trois points successifs et le caractère points de suspension, qui est un caractère unique et peut s'écrire tel quel en HTML (si le texte est en UTF-8 notamment) ou sous la forme d'une entité: … (pour horizontal ellipsis).

missatorito a écrit :
Je sais très bien que c'est un pb de Haslayout de IE8.

Il n'y a pas de HasLayout dans IE8. Uniquement dans IE 5-7.

missatorito a écrit :
C'est le inline-block que j'écris qui lui pose problème.

IE8 a un support correct de display:inline-block.
Un cas de figure où IE8 peut ne pas interpréter display:inline-block c'est si la page n'est pas affichée en mode Standards mais en mode d'affichage de compatibilité. Est-ce que tu as bien un Doctype en bonne et due forme au début de ta page? Que disent les outils pour développeur d'IE8 sur le mode d'affichage utilisé?

La technique du display: inline; zoom:1; n'est pas utile pour IE8, mais peut être utile pour simuler (tant bien que mal...) un comportement de type display:inline-block dans IE7.

Bonjour,

merci pour ta réponse.

Donc dans un premier temps si je cherche a faire fonctionner mes propriétés sur IE 7 c'est que j'en ai l'obligation. ainsi que sur IE8.

Sinon je ne me prendrais même pas la tête avec ça. Pour moi, IE 7 n'est vaut pas la peine, mais quand on n'a pas le choix on n'a pas le choix.

Pour ellipsis, je parle de la propriété ellipsis de text-overflow.

Enfin, j'ai trouvé. Quand j'en aurai le temps, je mettrai le détail sur ce post.

Voila et merci pour tes précisions.

Missa