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的优秀文章。

了解如何有效地使用列表是一个黑客和一个专业人士之间的区别。去学习这个。