对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凹凸线)
猜你喜欢
- MNIST数据集比较小,一般入门机器学习都会采用这个数据集来训练下载地址:yann.lecun.com/exdb/mnist/有4个有用的文
- 长期以来一直以为iframe跟div一样都是块级元素,直到今天在一个群中看到一位朋友问到iframe怎么居中的时候,测试了下发现原来我一直对
- 在ASP中,除了ADODB、Scripting 等一些常用组件外,我们还可以用微软的ActiveX方法来轻松捕获哟: <%u
- MySQL安装文件已被广泛应用但是也在不断的更新,这里介绍MySQL安装文件设置使用,帮助大家安装更新MySQL安装文件系统。Fedora5
- 语言的内存管理是语言设计的一个重要方面。它是决定语言性能的重要因素。无论是C语言的手工管理,还是Java的垃圾回收,都成为语言最重要的特征。
- python的uuid都是32位的,比较长,处理起来效率比较低,本算法利用62个可打印字符,通过随机生成32位UUID,由于UUID都为十六
- 本文实例讲述了Python简单实现自动删除目录下空文件夹的方法。分享给大家供大家参考,具体如下:总是发现电脑用上一段时间,各种软件生成各种目
- 下列语句部分是Mssql语句,不可以在access中使用。SQL语句分类:DDL—数据定义语言(CREATE,ALTER,DROP,DECL
- 论坛里面有不少人在使用Javascript编写Asp,经常有人在论坛提问,为什么Asp对象在对比指定值时返回结果不对?现在在这里给大家写点关
- 本文实例讲述了Go语言实现简单留言板的方法。分享给大家供大家参考。具体实现方法如下:package mainimport ( &n
- Python 3最重要的新特性大概要算是对文本和二进制数据作了更为清晰的区分。文本总是Unicode,由str类型表示,二进制数据则由byt
- 这里inference两个程序的连接,如目标检测,可以利用一个程序提取候选框,然后把候选框输入到分类cnn网络中。这里常需要进行一定的连接。
- PHP中重定向网页跳转页面的方法(共三种)第一种:利用header()函数进行重定向,这也是我用的较多的。(注意!locationhe和“:
- 前言在Python中定义函数,可以用必选参数、默认参数、可变参数和关键字参数,这4种参数都可以一起使用,或者只用其中某些,但是请注意,参数定
- 需要ocr识别,推荐一个Python免费的验证码识别-ddddocr安装过程:1、镜像安装:pip install ddddocr -i h
- 由用户指定需要扫描的盘符或目录,输入需要查找的文件或者文件夹名称(不包含中文名称)代码:# encoding=utf-8import os.
- 目录01 all or any02 dir03 列表(list)推导式04 pprint05 repr06 sh07 Type hints0
- 函数介绍Socket对象方法:服务端:函数描述.bind()绑定地址关键字,AF_INET下以元组的形式表示地址。常用bind((host,
- 本文实例讲述了Python函数装饰器实现方法。分享给大家供大家参考,具体如下:编写函数装饰器这里主要介绍编写函数装饰器的相关内容。跟踪调用如
- 本文记录了mysql 8.0.14 安装配置的过程,供大家参考,具体内容如下1.下载地址:下载地址找到zip压缩文件.2.配置环境变量把解压