fieldset背景溢出BUG的解决

来源：互联网发布：算法帝国 pdf 编辑：程序博客网时间：2024/06/13 10:10

分析：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。

0 0