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 and chrome look http://jakub.sturc.info/data/so-labeled-inputs-chrome.png

但是在Internet Explorer 7中，它有点格式错误： malformed IE7 look look 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标记，但出于某种原因确实应用了填充。

IE7输入有问题

2 个答案: