Firefox 选择字段中的 CSS 间距问题答案

【问题标题】：CSS spacing issue in Firefox Select FieldFirefox 选择字段中的 CSS 间距问题
【发布时间】：2011-10-05 17:09:50
【问题描述】：

我在使用 Firefox 时遇到了 CSS 间距问题。这在 Chrome 中运行良好。当我有一个带有字段的表单并在选择字段之后为该行添加标签时，它前面有额外的空间。

您可以在这里看到图片中的问题：http://i51.tinypic.com/35b8gmf.png。文本'test2'前面的空格是从哪里来的？

代码如下：

<style>
label {
    float:left;
    width:70px;
}
input, select {
    width:130px;
}
</style>
<label for="l1">test1</label>
<select id="l1" name="test1"><option>a</option></select>
<br>
<label for="l2">test2</label>
<input id="l2" type="text" size="30" name="test2">
<br>
<label for="l3">test3</label>
<input id="l3" type="text" size="30" name="test3">

【问题讨论】：

Firefox 的哪个版本？你的平台是 Windows 还是 Mac？您的目标是什么 DOCTYPE？

标签： html css firefox

【解决方案1】：

<style>
label {
    float:left;
    width:70px;
}
input, select {
    width:130px;
}
</style>
<label for="l1">test1</label>
<select id="l1" name="test1"><option>a</option></select>
<br style="clear:both;">
<label for="l2">test2</label>
<input id="l2" type="text" size="30" name="test2">
<br style="clear:both;">
<label for="l3">test3</label>
<input id="l3" type="text" size="30" name="test3">
<div id="tests">asd</div>

【讨论】：