單選按鈕格式

我遇到了讓我的單選按鈕佈局（和複選框）正確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

單選按鈕格式

回答

相關問題