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 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>

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

转载于:https://www.cnblogs.com/shishm/archive/2012/03/05/2380509.html

fieldset在ie8下的margin\padding bug规避相关推荐

IE8下面的line-height的bug
当line-height小于正常值时,超出的部分将被剪裁掉转载于:https://www.cnblogs.com/jsingleegg/p/js_ie8.html
ie6下padding bug
今晚发现ie6下原来还有一个bug,看代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
IE7下JSON不能有多余的逗号，IE8下创建IMG节点的BUG
细节决定成败,参加工作不久,所以一些规范还没有养成,出很多不该出的BUG 在低版本的IE下,如IE7,JSON不能出现多余的逗号,否则会报错,但是在其他浏览器中,不存在该问题. 如 { "n ...
ie8下jquery改变PNG的opacity出现黑边,ie6下png透明解决办法
目前互联网对于网页效果要求越来越高,不可避免的用到PNG图片,PNG分为几种格式,PNG8 PNG24 PNG32,其中最常用的,也是显示效果和大小比较适中的则是PNG24,支持半透明,透明,颜色也 ...
jQuery UI在Server 2008 IE8下DatePicker问题修复
这真是个WTF的问题,类似参见Stack Overflow 这个DatePicker问题只在Server 2008的IE8下出现.至于为什么win7的IE8支持,Server2008的IE8不支持,就 ...
[转]ie6下CSS存在的BUG
A 双倍MARGIN 設置float的位于行首的元素[如div, ul中的li等],使用margin后,横向margin值会加倍 div { float:left; margin-left:10px; ...
img图片下多余空白的BUG解决方案
在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是"见机行事",根据原 ...
在ie8下ext显示的问题
在ie8下,点击左边的树形导航栏,在右面板中,弹出相对应的内容,这些内容都写在iframe中,但是在ie8下,需要随便在页面上点击一下鼠标,才能显示内容,换成Firefox和ie7,都能正常的显示,求 ...
在 IE8 下 EXT的显示问题
在ie8下,点击左边的树形导航栏,在右面板中,弹出相对应的内容,这些内容都写在iframe中,但是在ie8下,需要随便在页面上点击一下鼠标,才能显示内容,换成Firefox和ie7,都能正常的显示,求 ...

fieldset在ie8下的margin\padding bug规避

fieldset在ie8下的margin\padding bug规避相关推荐

最新文章

热门文章