对fieldset和legend的默认样式一点分析

 首先这个是7米当时问我一个问题，不过可惜我不知道怎么解决，后来知道解决方法很简单，只是添加了一个margin-top:-1em就可以了。这个问题呢就是在IE中fieldset会有一部分的背景色多出来，而其他浏览器则不会。

下面的内容是今天利用有点空闲的时间做的一个简单的测试，会有遗漏也会在理解上有错误，大家发现了请留言一起讨论。谢谢！

主要测试的浏览器是：Internet Explorer 7 -- Mozilla Firefox 2 -- Netscape Navigator -- Apple Safari -- Opera

xhtml:

 程序代码

<fieldset>
    <legend>表单头</legend>
    padding-top:100px;
</fieldset>

CSS:

 程序代码

<style type="text/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凹凸线）