/ Bug

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,为以后的界面改动预留退路!