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

作者:林小志 来源:林小志blog 时间:2008-07-02 12:56:00 

 首先这个是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凹凸线)

标签:fieldset,legend,样式,浏览器
0
投稿

猜你喜欢

  • JavaScript 在各个浏览器中执行的耐性

    2009-02-06 15:26:00
  • PL/SQL 类型格式转换

    2009-02-26 11:07:00
  • innerHTML 引发“未知的运行时错误”

    2008-04-09 13:06:00
  • 网站浏览器兼容的底线

    2007-12-22 11:26:00
  • 初探MS SQL CE+Codesmith

    2009-05-11 09:03:00
  • 何时将数据装载到Application 或 Session 对象中去?

    2009-12-03 20:17:00
  • 用ASP木马实现FTP和解压缩

    2008-02-13 08:47:00
  • Tag的自定义类

    2010-03-18 15:53:00
  • ASP中Utf-8与Gb2312编码转换乱码问题的解决方法 页面编码声明

    2012-11-30 20:45:55
  • HTML语言将加入硬件操作功能

    2009-12-16 19:19:00
  • 长文章自动分页asp实例-支持HTML

    2007-10-10 21:29:00
  • 从SNS看社会化界面设计(一)

    2009-02-23 12:21:00
  • asp如何统计字符串出现的次数?

    2009-11-25 20:36:00
  • CSS实例教程:复合型CSS条状图表(上)

    2010-01-23 12:43:00
  • Mysql使用Describe命令判断字段是否存在

    2011-04-25 18:27:00
  • SQL Server 自动增长清零的方法

    2012-01-05 19:07:47
  • jQuery代码的14条改善技巧[译]

    2009-12-02 10:02:00
  • 从MySQL导大量数据的程序实现方法

    2009-03-06 14:34:00
  • SQL存储过程初探

    2009-09-09 14:22:00
  • SQL Server数据迁移至云端应用技巧谈

    2011-05-05 08:01:00
  • asp之家 网络编程 m.aspxhome.com