fieldset在ie8下的margin\padding bug规避

最新推荐文章于 2021-07-09 18:36:41 发布

weixin_33795806

最新推荐文章于 2021-07-09 18:36:41 发布

阅读量139

点赞数

原文链接：http://www.cnblogs.com/shishm/archive/2012/03/05/2380509.html

版权

写在前面的话

其实我不推荐使用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 padding 测试

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

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> 
  