Проблема с входами с IE7

Question

У меня есть следующий код в HTML:

<div>
  <div style="float:left;margin:0.5em">
    <span class="title">Label1</span><br/>
    <input type="text" name="name1" size="8" />
  </div>
  <div style="float:left;margin:0.5em">
    <span class="title">Label2</span><br/>
    <input type="text" name="name2" size="12" />
  </div>
  <div style="float:left;margin:0.5em">
    <span class="title">Label3</span><br/>
    <input type="text" name="name3" size="12" />
  </div>
  <div style="float:left;margin:0.5em">      
    <span class="title">Label4</span><br/>
    <select name="name4">
      <option value="m">value1</option>
      <option value="f">value2</option>
    </select>
  </div>
  <div style="float:left;margin:0.5em">
    <span class="title">Label5</span><br/>
    <input type="text" name="name5" size="8" />
  </div>
</div>

В Mozilla Firefox и Google Chrome все выглядит хорошо: Firefox и хромированный вид http://jakub.sturc.info/data/so-labeled-inputs-chrome.png

Однако в Internet Explorer 7 он слегка искажен: искаженный внешний вид IE7 http://jakub.sturc.info/data/so-labeled-inputs-ie7.png

Есть ли у вас какие-либо советы, как заставить IE отображать желаемый результат?

Answer 1

, так как вы не используете сброс css, я бы порекомендовал бы ярлык изменить вместо этого отступы для отступов в div-обертках, которые будут согласованы между браузерами.

Не самая лучшая техника, но самая простая в вашем случае.

Answer 2

Я думаю, что Ричард дал вам правильный ответ, похоже, это работает:

<div style="float:left;padding:0.5em">
<span class="title">Label1</span><br/>
<input type="text" name="name1" size="8" />
</div>

Проблема должна заключаться в том, что IE не применяет поля к тегу span, но по какой-то причине применяет отступ.