Question

我有一个动态生成的表单，在我测试的所有浏览器中显示正常，除了IE6和＆amp; 7.我的标题应该能够放在表格输入的上方或侧面。对于单选按钮和复选框，我希望控件位于标签的左侧，对于所有其他输入，我希望控件位于右侧。两者的HTML应该相同，只有CSS应该改变。

() Radio 1  () Radio 2
[] Checkbox 1  [] Checkbox 2
Text |____________|
etc.

或

Radio 1  Radio 2
()       ()
Checkbox 1  Checkbox 2
[]          []
Text
|____________|
etc.

到目前为止我已经

了

<span class="control">
  <label for="a1" class="forbutton">A1</label>
  <input type="checkbox" id="a1" class="form-input-checkbox" name="a" value="1"/>
</span>

或每个输入的类似内容。 CSS是

.forbutton {
  margin-bottom: 0.20em;
  float: right;
}
.control {
  display: inline-block;
  vertical-align: text-top;
  position: relative;
}

/* Only if you want labels above inputs */
.form-input-checkbox,
.form-input-radio {
  display: block;
  clear: both;
}

在IE6＆amp; 7＆lt; span＆gt; s最终是100％宽度而不是取其内容的宽度（与其他浏览器一样，包括IE8）。我该如何轻松解决这个问题？如果我给跨度一个宽度它确实修复它，但是，我不知道它应该有多宽，因为标签是动态生成的。

目标：
有效的HTML
有效的CSS
HTML代码输入之前的标签
上面标签的相同HTML代码和侧面的标签

任何达到相同结果的解决方案都将被感激地接受！

Answer 1

我建议在那个范围内摆脱“display：inline-block”。 IE7和早期版本不理解它。此外，在此示例中，您对该元素的其他样式并不真正保证使用内联块。默认情况下，Span是内联的，我会这样离开。

如何使用“float：right;”防止<span>的100％宽度IE6中的内容和7？</跨度>

1 个答案: