IE 6/7 Bug: 在fieldset中隐藏legend所导致的bug

by ytzong

2009-03-01

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显示效果：

解决方法：

删除legend在fieldset外套一个div，并将样式写在此div上

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

补充：

fieldset与legend的bug不止这一个，最好就是在fieldset外部或内部加个div怎么控制fieldset隐藏，legend中加个span怎么控制fieldset隐藏，为今后的界面改动预留退路！

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-131223-1.html