IE7浮動單選按鈕問題

Question

我在IE7中爲我爲這個網站製作的重新註冊表單存在問題，它只在底部出現混亂，而且只發生在IE7中。有問題的頁是一個：

https://www.iptlock.com/createaccount.php

本頁底部的單選按鈕出現在相反的順序。我讓他們像這樣在CSS中設置，但這不是它們顯示的方式。任何想法爲什麼？

#packagechoice{ 
     width:20px; 
     position:relative; 
     margin-left:190px; 
     margin-top:15px; 
     float:left; 
    } 

    #packagechoice2{ 
     width:20px; 
     position:relative; 
     margin-left:190px; 
     margin-top:15px; 
     float:left; 
    } 
    #packagechoice3{ 
     width:20px; 
     position:relative; 
     margin-top:15px; 
     float:left; 
} 

Answer 1

當使用float:left時，最左邊的項目需要首先出現在HTML中。你的HTML是相反的順序。

編輯：

與HTML的問題是，單選按鈕和包裝是分開的線項目。它們在HTML中顯得很遙遠。你的代碼也受到DIV-itis的困擾。它缺乏語義結構，這就是爲什麼事情不像你期望的那樣合作。

考慮一下：

<style> 
.packages ul, .packages li { 
    list-style:none; 
    padding:0; 
    margin:0; 
} 

.packages li { 
    float:left; 
} 

.clear { 
    clear:both; 
} 
</style> 

<div class='packages'> 
    <ul> 
     <li> 
      --- your package --- 
      --- your radio button --- 
     <li> 
     <li> 
      --- your package --- 
      --- your radio button --- 
     <li> 
     <li> 
      --- your package --- 
      --- your radio button --- 
     <li> 
    </ul> 
    <div class="clear"></div> 
</div> 

東西，一起去的名單。 HTML中已經有一個列表標籤：UL或OL，正確使用它非常重要，是消除DIV-itis的好方法。列表具有語義意義，對於搜索漫遊器和屏幕閱讀器更友好。

有一篇關於taming lists的優秀文章。

瞭解如何有效地使用列表是一個黑客和一個專業人士之間的區別。去學習這個。