2010-03-02 6 views
1

Semble être très différent dans webkit par rapport à ie/ff/opera.CSS + <img> Implémentation de webkit avec utilisation de%

Pour répliquer - prenez une image qui ressemble à dire, w: 200px h: 400px.

déposer html comme ceci.

<div id="container"> 
    <img id="whattheeff" src="/image.jpg" height="200" width="200" alt="render bug" /> 
</div> 

et ajouter comme css

<style> 
div#container{height:1000px;background:#fff;border:1px dashed #000;} 
img#whattheeff{width:200px; height:100%;} 
</style> 

Le résultat est la plupart des navigateurs affichant l'image à sa hauteur d'origine 400px et webkit montrant l'image à la hauteur de son parent. 1000px.

Quiconque a déjà vu ça? Quelqu'un a une suggestion pour que webkit joue le même rôle.

+0

L'img est un élément remplacé de niveau bloc en écoulement normal. FWICS dans http://www.w3.org/TR/CSS2/visudet.html#the-height-property le comportement du webkit est correct, la hauteur est relative au bloc conteneur. – p00ya

+0

@ p00ya - est un élément en ligne. – Rowno

+0

oups, donc c'est. Cependant, la section 10.6.2 (éléments remplacés en ligne, éléments remplacés au niveau du bloc dans le flux normal, éléments remplacés 'inline-block' dans le flux normal et les éléments remplacés flottants) s'applique toujours: la hauteur est relative au bloc conteneur. – p00ya

Répondre

1

Je résolu ce problème:

Je mets height:auto; au lieu de 100%.

auto Ignore la déclaration dans la balise d'image et regarde la hauteur de l'image auto ... la même chose que 100% dans la plupart des navigateurs sauf webkit.

Leçon appris. Merci à Cork sur #jquery sur freenode.

0

En fait, firefox/ie (8) et chrome (webkit) rendent l'image avec la hauteur des parents.

Questions connexes