css - IE 9 标准模式和 Chrome 中文本框右侧不需要的空格

Question

谁能解释一下为什么以及如何去掉输入文本框右侧和红色边框之间的空格

即:http://jsfiddle.net/fQHGA/

<div style="float:left;border:1px solid red">
    <label style="float:left">asdasdfasdff</label>
    <input style="display:block;margin-left:100px">
</div>

IE、Chrome:http://jsfiddle.net/cxDvF/2/

<div style="float:left;border:1px solid red">
    <div>
        <label style="float:left">asdasdfasdff</label>
        <input style="display:block;margin-left:100px">
    </div>
</div>

谢谢

Answer 1

我一直在重复自己。

http://www.ntutorials.com/css/understanding-floating请阅读本教程。

简单地回答你的问题，当你 float 一个元素时，定义它的宽度。否则可能会导致跨不同浏览器的问题。

此外，如果您有默认样式设置，输入可能会有一点余量。这可能也是原因。尝试重置边距。

编辑

我不确定你想用你在 jsfiddle 中提供的那个例子来实现什么，但这里有一些要点。

1. 输入没有结束标签。因此，</input>无效。
2. 您正在尝试 float 标签和输入，它们都是内联元素，因此没有必要 float 它们。
3. 如果您不知道宽度，那么您应该找到一些变通方法。没有宽度的 float 与浏览器不一致。