fieldset在ie8下的margin\padding bug规避

写在前面的话                                                                                                                                                       

其实我不推荐使用fieldset这个标签,正如我们常常议论的那样这东西在不同的浏览器下确实操蛋,但是在一些老的项目中大量使用,所以还是有必要分析一下,fieldset到底有哪些怪毛病,如何规避!我承认我闲的蛋疼,不喜请绕路!

fieldset margin 测试                                                                                                                                         

环境说明:win7 + ie 8.0 +chrome 16.0 +firefox 10

<!DOCTYPE HTML>
<html>
<body>
<fieldset style="margin:100px auto;width:600px;height:100px">
<legend>测试表单</legend>
<form>
<label>测试1:<input type="text" /></label>
<label>测试2:<input type="text" /></label>
</form>
</fieldset>
</body>
</html>

首先测试fieldset在不同浏览器下margin的表现

fieldset在ie8下的margin\padding bug规避_第1张图片2012-03-05_1436122012-03-05_143802

fieldset padding 测试                                                                                                                                         

添加padding:20px; ie8出现了异常情况!(padding的作用位置不同,详见文章后的评论,呵呵)

fieldset在ie8下的margin\padding bug规避_第2张图片fieldset在ie8下的margin\padding bug规避_第3张图片

fieldset bug 解决方案                                                                                                                                         

这里没有最好的解决方案,只是规避方案(最佳实践是不用这个标签)。尽量不在fileset标签上使用margin\padding的样式,应交由fieldset的包裹元素和内含元素的margin来间接实现

注:为啥说到margin呢,因为在低版本的ie上fieldset的margin也是存在bug的,我们今天讨论的bug在ie9中均已修复。

<!DOCTYPE HTML>
<html>
<body>
<fieldset style="margin:100px auto;width:600px;height:100px">
<legend>测试表单</legend>
<div style="margin:20px">
<form>
<label>测试1:<input type="text" /></label>
<label>测试2:<input type="text" /></label>
</form>
</div>
</fieldset>
</body>
</html>

fieldset在ie8下的margin\padding bug规避_第4张图片

 

最后建议:不要使用标签fieldset了

你可能感兴趣的:(padding)