fond en div inline obtenir couper à partir du bas dans Chrome! bien dans IE

Question

j'ai ce code:

<span>your password</span><div style="display:inline; width:160px;height:22px;background-image:url('pics/BGfield.gif');"><input name="password" type="password"></div> 

l'arrière hauteur get-de-chaussée peut-être 18-20 px ... pourquoi est-ce?

si je l'utilise enjamber fait la même chose - si j'utilise div comme bloc est ok

comme dit - problam dans Chrome, FF, mais pas dans IE

Answer 1

Si je me souviens bien, vous n'êtes pas autorisé à définir la hauteur d'un élément en ligne. C'est pourquoi, lorsque vous définissez le display:block cela fonctionne comme prévu. En outre, vous ne pouvez pas définir la hauteur d'un élément span.

Le fait que cela fonctionne dans IE signifie seulement que IE ne suit pas les normes, comme d'habitude.

MISE À JOUR: Ce que je fais habituellement, au lieu d'utiliser un élément en ligne, utilise un élément flottant. Par exemple:

<div style="float:left">your password</div> 
<div style="float:left; width:160px;height:22px;background-image:url('pics/BGfield.gif');"> 
    <input name="password" type="password"> 
</div> 
<div style="clear:left;"></div> 

MISE À JOUR 2: Peut-être quelque chose comme ça fonctionnera

<div id="container" width="THEWIDTH"> 
    <div style="float:left">your password</div> 
    <div style="float:left; width:160px;height:22px;background-image:url('pics/BGfield.gif');"> 
     <input name="password" type="password"> 
    </div> 
    <div style="clear:left;"></div> 
</div> 

Où THEWIDTH est la largeur des divs l'intérieur « conteneur » plus quelques marges/rembourrages que vous voulez leur donner.

L'espacement entre les divs, vous devrez le définir dans le style de chaque div, cependant.