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

最新推荐文章于 2022-09-15 21:42:59 发布

转载最新推荐文章于 2022-09-15 21:42:59 发布 · 1.4k 阅读

收录于

css

本文深入分析了hr元素在ie和firefox等浏览器中的表现差异，包括高度、颜色、边距等问题，并提供了调整这些差异的CSS代码和hack方法。同时，讨论了如何将hr元素作为div元素使用，以及如何解决跨浏览器兼容性问题。

兼容浏览器的完美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.高度：size和style.height.

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

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

3.颜色：color和style.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。

在项目的好几个页面里用到了hr，想用它做成一条灰色的分隔线，结果发现了些很诧异的：
   我把hr写到一对<td></td>标签中: <td><hr style="....."></td>
   firefox下没有默认的上、下、左、右边距，
于是在<hr style="width:140px; height:1px; color:#F2F2F2; border:0; background:#F2F2F2; ">后加了段：
   margin-left:22px !important;    //firefox
   >margin-left:0px !important;    //ie7
   margin-left:0px;                       //ie6     左边距
margin-top:7px !important; >margin-top:0px !important; margin-top:0px;
margin-bottom:7px !important; >margin-bottom:0px !important; margin-bottom:0px;
   来调整ff左、上、下边距的问题
   此时在IE和FireFox下都OK了，达到了预想的那样，可想着多处用到这个样式，也好便于以后修改，就放到css.css文件里： hr{这段样式设置代码} 再来浏览，问题就来了 IE和FireFox下却都没有效果了，即使给hr 加上id 或是class选择器也没有生效。真不知怎了？若谁路过指教指教

标签

#ie #firefox #浏览器 #border #float