фон в встроенном div вырезать снизу в Chrome!хорошо в IE

Question

у меня есть этот код:

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

фоновая высота может быть 18-20 пикселей ... почему?

если я использую span, он делает то же самоеесли я использую div в качестве блока, то все в порядке

, как сказано - проблам в Chrome, FF, но не в IE

Answer 1

Если я правильно помню, вам не разрешено устанавливать высоту встроенного элемента. Вот почему, когда вы устанавливаете display:block, он работает как положено. Кроме того, вы не можете установить высоту элемента span.

Тот факт, что он работает в IE, означает, что IE не следует стандартам, как обычно.

UPDATE: Вместо встроенного элемента я обычно использую плавающий элемент. Например:

<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>

ОБНОВЛЕНИЕ 2: Может быть, что-то подобное будет работать

<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>

Где THEWIDTH - ширина элементов div внутри "контейнера" ​​плюс некоторые поля / отступы, которые вы хотите им дать.

Интервал между divами, однако вам нужно будет установить его в стиле каждого div.