首先这个是7米当时问我一个问题,不过可惜我不知道怎么解决,后来知道解决方法很简单,只是添加了一个margin-top:-1em就可以了。这个问题呢就是在IE中fieldset会有一部分的背景色多出来,而其他浏览器则不会。
下面的内容是今天利用有点空闲的时间做的一个简单的测试,会有遗漏也会在理解上有错误,大家发现了请留言一起讨论。谢谢!
主要测试的浏览器是:Internet Explorer 7 -- Mozilla Firefox 2 -- Netscape Navigator -- Apple Safari -- Opera
xhtml:
程序代码
<legend>表单头</legend>
padding-top:100px;
</fieldset>
CSS:
程序代码
fieldset {width:600px;height:500px;padding-top:100px;margin:150px auto;background:#ccc;}
legend {width:100px;height:25px;background:#000;color:#fff;}
</style>
·fieldset legend 默认的display为block;
·添加margin:150px auto;后,IE7中居中但上margin-top:150px;margin-bottom:150px;失效,而FF2、navigator、safari、opera中确实正常的
·默认情况下legend的表现只有几个像素之差,但对legend设置了宽高后,只有IE、safari、opera有效,而FF2、navigator无效。
·在IE7中legend的旁边还会有几个像素的空白。
·legend的垂直高度的中间位置在默认情况下是对着fieldset的上边距的,就算是给legend加上padding-top以及padding-bottom都是如此,这个每个浏览器表现都是一样的。
·当legend加上margin-top的时候,会发现IE7中是legeng跟fieldset的上边框一起跑到下面来,而FF2和navigator是legend自己跑下来,无视fieldset的上边框,而safari和opera则是完全无视这个margin-top。
·对fieldset设置背景色的情况下,IE的表现是将背景色扩散到外面包含了legend所占的行空间,但不包括fieldset的边框在内,而FF2、navigator、safari、opera则是在fieldset默认的边框内。
·对fieldset添加padding-top,IE7的表现犹如对legend添加margin-top一样,而FF2、navigator、safari、opera则是正常表现,在fieldset中添加了相对应的高度。

·默认的情况下,除了safari的边框表现黑灰结合的3D凹凸线,FF2、navigator、opera则表现为黑白结合的3D凹凸线,IE7则为带圆角的灰色曲线(如果加了背景色,就会是黑白结合的3D凹凸线)



请稍等,评论加载中...