IE 6/7 Bug: 在fieldset中隐藏legend所引发的bug

HTML:

<fieldset>  
<legend>登陆</legend>  
<ul>  
<li><label>账号:</label><input type="text" /></li>  
<li><label>密码:</label><input type="password" /></li>  
</ul>  
</fieldset>  

CSS:

body{font-family:Arial, Helvetica, sans-serif;font-size:14px;}  
fieldset, ul{margin:0;padding:0;}  
li{margin:1em;list-style-type:none;}  
fieldset{width:300px;border:5px solid red;}  
legend{display:none;}/*隐藏legend*/  
ul{border:5px solid black;}  
input{width:200px;padding:2px;}  

正常效果:

IE 6/7显示效果:

解决方法:

  1. 删除legend
  2. 在fieldset外套一个div,并将样式写在此div上

基于语义等因素推荐使用第二种方法。

补充:

fieldset与legend的bug不止这一个,最好就是在fieldset外部或内部加个div,legend中加个span,为以后的界面改动预留退路!