对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凹凸线)
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python实现生成随机日期字符串的方法示例
了解WEB页面工具语言XML(二)定义
Oracle数据库中表空间的基本管理操作小结
![](https://img.aspxhome.com/file/2023/9/65239_0s.jpg)
opencv与numpy的图像基本操作
![](https://img.aspxhome.com/file/2023/4/102774_0s.jpg)
SQL Server 自动化管理分区设计方案(图解)
手把手教你如何安装Pycharm(详细图文教程)
![](https://img.aspxhome.com/file/2023/3/66003_0s.png)
查询表中某字段有重复记录个数的方法
python能在浏览器能运行吗
在MAC OS X上安装MYSQL
Vue组件全局注册实现警告框的实例详解
![](https://img.aspxhome.com/file/2023/5/130155_0s.jpg)
python-for x in range的用法(注意要点、细节)
![](https://img.aspxhome.com/file/2023/8/100978_0s.png)
asp 去掉html中的table正则代码函数
MySQL Server 层四个日志详解
![](https://img.aspxhome.com/file/2023/5/95625_0s.jpg)
python的pytest框架之命令行参数详解(下)
![](https://img.aspxhome.com/file/2023/3/93803_0s.png)
python编程实现清理微信重复缓存文件
![](https://img.aspxhome.com/file/2023/7/68417_0s.png)
Javascript 面试题随笔
php基于协程实现异步的方法分析
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2011年网页设计发展趋势
![](https://img.aspxhome.com/file/UploadPic/20111/10/01-45s.jpg)
一文看懂JSONP原理和应用
![](https://img.aspxhome.com/file/2023/1/135681_0s.png)