完美的hr-兼容各个浏览器firefox,ie6,ie7

本文介绍了一种兼容各大浏览器的水平分割线(hr)样式设置方法。通过细致地调整CSS属性,如高度、边框、边距等,使得hr元素在不同浏览器中表现一致。特别是针对IE和Firefox的特点进行了详细的说明。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

兼容浏览器的完美hr

height:1px;
border:none;
border-top:1px solid Black;
margin:0;
*margin:0 0 -14px 0;
float:none;
*float:left;
display:block;


1.hr元素是一个块级元素,是一个box,有border

2.高度:sizestyle.height.

ie
firefox对size解释和计算是不同的,所以最好不用size,用height,但是会出现一个有边框的box,所以将border:none.

firefox下用了size就是实心的box,不用就是一个普通的块级元素。


3.颜色:colorstyle.border-color

height
如果不大于2px是看不出这两个属性的区别的。

firefox:color=border-color,高度大于2的时候,会出现一个空心的box

IE:对border-color不识别,要使用border:1px solid Black;

4.边距

hr在firefox下没有默认边距(即使有用margin:0也可以将其消除)

hr在ie下有默认的上边距14px和下边距14px(即使将margin:0),用float来消除margin-top(请用*float,或者用width然后再float.)

然后在使用css hack对ie设置一个margin-bottom:-14px,这样下面的元素就会上移14px,就好像把hr下面的边距消除了一下。

ps:hr在firefox下居然是圆角的,而且如果将hr的高和宽设置相同的值,就可以得到一个圆(实心或空心)哦。


其实是将hr当成一个div还使用了,而且还是一个不同浏览器解析起来有很大差异的诡异的div,所以使用hr还不如直接用div的border。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值