您的位置:首页 > Web前端 > CSS

fieldset背景溢出BUG的解决

2015-07-16 11:24 549 查看
分析:IE让fieldset溢出,并不是没有道理,fieldset是块级元素,IE将它与div等相同处理,fieldset包含legend,既然要讲背景延伸到legend下面。

解决方法一:既然fieldset边界在legend下面,那就让它收缩一下好了。将fieldset的内边距padding-top设置为0,并让legend外边距margin-top设置为负值

fieldset{
margin:20px 0;
padding:0px 15px 15px 15px;   /*将padding-top设置为0是为了修补IE下fieldset背景溢出的BUG。要和legend的margin-top配合使用*/
border:2px solid #1F408B;
background:#B6C2D1;
}
legend{
font-weight:bold;
}
*+html legend  /*写个hack,让负值边距只出现在IE下*/
{
margin:-8px 0 0 0;   /*-8这个值要根据legen的体积来定,而legend体积又和包含的内容字号有关,每个浏览器是有区别的,多瞅瞅就好*/
}

这个BUG处理有很大的问题,margin-top的负值设置不当会导致背景与框架的脱机,使IE与其他浏览器显示有区别。

第二个解决方法:让那个狗屎fieldset和legend彻底脱离文档流,fieldset的体积不在受其包含的legend的大小所左右。给legend一个绝对定位,并让其的top一个负值,时期向上浮动。

fieldset{
position:reletive;
margin:20px 0;
padding:15px;
border:2px solid #1F408B;
background:#B6C2D1;
}
legend{
position:position;
top:-3px;                      /*top的负值,要正好合适才好*/
font-weight:bold;
}
这个方法的最大好处就是兼容所有浏览器,显示无差别,不用写hack。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  fieldset css