字段集的佈局不一致ie7

我正在嘗試將字段集圖例用作一組單選按鈕的標籤。 HTML和CSS我已經在IE8 & 9，firefox和chrome中正常工作。在IE7中，標籤出現在單選按鈕上。在所有其他瀏覽器中，標籤顯示在按鈕的左側。我很高興爲IE7添加一個條件文件，但我無法弄清楚什麼可以使這項工作。字段集的佈局不一致ie7

問題是下面的標記複製

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

    <html> 
    <head> 
    <title>Untitled</title> 
    <style type="text/css"> 
    .radiolegend { 
     display: inline; float: left; width: 300px; 
    } 
    .fieldsetstyle { 
     border: 0 none; clear: left; float: left; 
     } 

    </style> 

    </head> 
    <body> 
    <form> 
    <fieldset class="fieldsetstyle"> 
    <legend class="radiolegend">legend</legend> 
    <input type="radio" name="r1" style="display: inline;" id="r1"> 
    <label for="r1">r1</label> 
    <input type="radio" name="r2" style="display: inline;" id="r2"> 
    <label for="r2">r2</label> 
    </fieldset> 
    </form> 
    </body> 
    </html>

來源

2011-11-16 Andrew Bucknell

您未關閉您的

如果你想IE7有條件的話，這樣做：

CSS

.radiolegend { 
    float: left; width: 150px; 
} 
.fieldsetstyle { 
border: 0 none; clear: left; float: left; width:300px; 
} 

.cb{ 
float:right; 
    margin-top:-20px; 
}

HTML現在

<form> 
<fieldset class="fieldsetstyle"> 
<legend class="radiolegend">legend</legend> 
    <div class="cb"><input type="radio" name="r1" style="display: inline;"/>r1</div> 
    <div class="cb"> <input type="radio" name="r2" style="display: inline;"/>r2 </div> 
    </fieldset></form>

，y你需要改變其他瀏覽器的樣式。請從.cb刪除margin-top:-20px;。您正在將文字打包在<input>標記中，這是不正確的。 <input>必須自行關閉

來源

2011-11-16 14:48:56

感謝bobek。它看起來像在IE7中，它總是在傳說之後放置一個換行符，以便在單選按鈕上使用負邊距。 –

字段集的佈局不一致ie7

回答

相關問題