单选按钮格式

我遇到了让我的单选按钮布局（和复选框）正确IE8的一个问题...火狐，Chrome，歌剧但是所有的工作..单选按钮格式

这里是问题的屏幕截图

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>

对不起，一个长行，但这是我如何通过源得到它..

来源

2010-02-12 Kevin

插入图像没有工作..但这里是一个链接 http://i46.tinypic.com/245j7o5.gif – Kevin 2010-02-12 21:15:54

如何道琼斯你想看看？因为我认为它在所有浏览器中都显示错误...（*虽然与IE不同，但错误* *） – 2010-02-12 21:31:59

我将代码封装在

尝试取出高度或.row输入浮动。如果可以的话，请避免调整行高。

来源

2010-02-12 21:51:19

我试过了，没有运气.. – Kevin 2010-02-12 22:13:00

这样做只是把一切都在块格式与标签在无线电上按钮.. – Kevin 2010-02-13 00:04:21

看起来像IE中的降压型另一种情况：Preventing Menu Stepdown

来源

2010-02-12 21:54:38

我已经尝试添加显示：内嵌到行元素 – Kevin 2010-02-12 22:12:01

和行输入和行标签...没有任何效果 – Kevin 2010-02-13 00:06:36

你们是不是要垂直或水平对齐呢？

如果垂直，将它添加到你的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; 
}

来源

2010-02-12 23:10:16 timrwood

林不知道，但是 - 你尝试clear属性？
在你的情况下，值将留给我觉得
w3 source

来源

2010-02-13 11:18:29 Knu

所以我添加了明确：这两个，这是我想出了.. http://tinypic.com/r/72f4tw/6 – Kevin 2010-02-17 18:07:54

好吧，现在你几乎可以让你的标签重新排列正确，或者你可以把你的输入放在它们各自的标签中 - 这是有效的以正确的顺序 - 文字最后） – Knu 2010-02-17 21:19:46

你会建议什么风格？我已经尝试了填充和线高度的摆弄，但都没有真正做到这一招。 – Kevin 2010-02-19 14:36:38

单选按钮格式

回答

相关问题