28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je suis en train de mettre en place un carousel d'image "adaptatif" pour mon site responsive et j'ai un petit problème d'affichage sous IE et Chrome (FF est OK).

J'ai recherché sur le forum, sur le web et je n'ai rien trouvé.

J'ai créé un petit Fiddle pour illustrer tout ça Smiley smile

Dans mon exemple, j'ai simplement mis la structure de base, sans JS, sans fioritures, afin d'être plus clair. En gros, mes images sont affichées les unes à la suite des autres pour pouvoir être slidées et je souhaite que ma liste fasse 20% de la hauteur de la page.

Lorsque je la resize en hauteur, sous FF, pas de problème, mes <li> s'adaptent bien en hauteur par rapport au 20% de la page et en largeur, par rapport à l'image.

Mais sous IE et Chrome, le ratio n'est pas respecté en largeur. J'ai mis un background:red; sur les <li> pour que ça soit plus parlant.

Est-ce que quelqu'un pourrait m'éclairer là-dessus parce que je sèche un peu... ? Smiley decu
J'ai essayé de "jouer" avec tout ce qui est display, position etc...mais rien n'y fait. Je dois manquer quelque chose.

J'espère que ne pas avoir fait d'erreur, c'est la première fois que je poste sur ce forum Smiley smile

Petite information complémentaire : je ne souhaite pas (encore) utiliser les Flexbox.

Merci d'avance Smiley smile
Modifié par Atom (21 Sep 2016 - 18:12)
Bonjour Atom,

Je n'ai pas testé sur IE mais à la lecture de ton style je vois de suite que le display inline sur l'élément ul ne permet pas l'héritage de la hauteur à ses enfants... Pourquoi ne pas le mettre en inline-block ou en block ?
Oui, tout à fait, tu as raison, c'est une erreur de ma part. Merci pour ton post.

J'ai corrigé le Fiddle.

Pour le coup, ça ne change pas grand chose sur IE Smiley decu
Petite Up sur le sujet, le problème survient également sous Chrome.

J'ai corrigé le post de base. Quelqu'un a une idée d'où vient le problème ?
Bonjour,

Si ça peut aider quelqu'un, en remplaçant les unités en vh, le problème est résolut (même si je ne comprends pas le pourquoi du comment).

Merci.