Question

我在IE8中正确地设置单选按钮（和复选框）时遇到问题.. Firefox，Chrome，Opera都可以正常工作..

以下是问题的屏幕截图

IE8 problem http://i46.tinypic.com/245j7o5.gif

代码如下：

.row input (line 471) {
  float: left;
  display: inline;
  width: 16px;
  height: 16px;
  margin-top: 0pt;
  margin-right: 5px;
  margin-bottom: 0pt;
  margin-left: 0pt;
}
.row label (line 479) {
  float: none;
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
}
div.panes label (line 70) {
  font-size: 95%;
  font-weight: bold;
  color: #222222;
  line-height: 150%;
  padding-bottom: 3px;
  display: block;
}

<label for="AdditionalResponses_0__Response" id="AdditionalResponses_0__Response_Label">Single answer</label>
<div class="row " id="AdditionalResponses_0__Response">
  <input id="AdditionalResponses_0__Response_one" name="AdditionalResponses[0].Response" type="radio" value="one" />
  <label for="AdditionalResponses_0__Response_one" id="AdditionalResponses_0__Response_one_Label">one</label>
  <input id="AdditionalResponses_0__Response_two" name="AdditionalResponses[0].Response" type="radio" value="two" />
  <label for="AdditionalResponses_0__Response_two" id="AdditionalResponses_0__Response_two_Label">two</label>
  <input id="AdditionalResponses_0__Response_three" name="AdditionalResponses[0].Response" type="radio" value="three" />
  <label for="AdditionalResponses_0__Response_three" id="AdditionalResponses_0__Response_three_Label">three</label>
  <input id="AdditionalResponses_0__Response_four" name="AdditionalResponses[0].Response" type="radio" value="four" />
  <label for="AdditionalResponses_0__Response_four" id="AdditionalResponses_0__Response_four_Label">four</label>
</div>

很抱歉这条长线，但这就是我通过源码获得它的方式..

Answer 1

尝试从.row输入中删除高度或浮动。如果可以的话，避免调整行高。

Answer 2

看起来像IE Stepdown的另一个案例：Preventing Menu Stepdown

Answer 3

您是尝试垂直或水平对齐吗？

如果是垂直，请将其添加到您的css

.row label {
    display: block;  
}

并更改您的标记，以便您的输入由标签包装。您不必以这种方式使用for =“”属性。

<label>
    <input id="AdditionalResponses_0__Response_one" name="AdditionalResponses[0].Response" type="radio" value="one" />
    one
</label>

如果是水平，请添加

.row input, .row label {
    float: left;  
    display: block;  
}

Answer 4

我不确定但是 - 你试过清楚的财产吗？在你的情况下，价值将留下我认为 w3 source

IE8中的单选按钮格式化（无法正确显示）

4 个答案: