了解hr标签的各种浏览器兼容问题

<hr> 标签是在页面中创建一条水平分隔线（horizontal rule），在视觉上将文档分隔成上下两部分。而很多时候我们制作水平线都是通过css的border-top，或者border-bottom来实现 的。这是因为<hr>在各个浏览器对的表现效果各不相同。

下面，我们就来了解<hr>在各个浏览器的一些兼容问题。注意：以下出现的主流浏览器是指IE8+、Chrome、火狐、Opera浏览器。

1、border:0 的表现效果

HTML：

<hr />

CSS：

hr {
    width: 80%;
    border: 0;       
}

以上代码从字面上理解本应该是宽度为80%，边框为零即不可见。而实际上所有浏览器中<hr>的宽度为80%，主流浏览器不显示任何内容，而在IE6、7浏览器却显示一条2px的灰色水平线，效果如以下两图所示：

上图：IE8+、Chrome、火狐、Opera浏览器

 

上图：IE6、7 浏览器

 

 

2、设置<hr>的颜色

 

在IE6、7浏览器中，设置<hr>颜色用 color；而在Chrome、火狐、Opera浏览器中用 background-color 。

 

HTML：

<hr />

 CSS：

hr {
    width: 80%;
    border: 0; 
    color: #f00;
    background-color: #000;
    height: 5px;
}

 以上代码在主流浏览器的颜色为黑色，在IE6、7浏览器中是红色，具体效果如以下两图所示：

上图：IE8+、Chrome、火狐、Opera浏览器

上图：IE6、7 浏览器

 

 

3、margin-top、margin-bottom的表现效果

在IE6、7浏览器中，<hr>的margin-top、margin-bottom会额外增加7px。

HTML：

<div class="section-01"></div>
<hr />
<div class="section-02"></div>

 CSS：

.section-01, .section-02{ 
    width:80%; 
    margin:0 auto; 
    height:10px; 
    overflow:hidden; 
    background-color:#ccc;
}
hr {
    border: 0;
    width: 80%;    
    margin-top: 20px;
    margin-bottom: 20px;    
    color: #f00;
    background-color: #f00;
    height: 1px;
}

以上代码在主流浏览器中的上下边距是20px，而在IE6、7浏览器是27px，具体效果如以下两图所示：

上图：IE8+、Chrome、火狐、Opera浏览器

上图：IE6、7 浏览器

 

因此，为了达到所有浏览器的效果一样，我们需要写兼容IE6、7的上下边距样式，其上下边距为主流浏览器数值减去7。如上面代码上下边距为20px，则 IE6、7浏览器的就为13px，对应的兼容样式写法是： *margin-top: 13px; *margin-bottom: 13px; 。

4、background-image的表现效果

HTML：

<hr />

 CSS：

hr {
    border: 0;
    width: 80%;
    height: 15px;
    color: transparent;
    background: #fff url(http://www.sovavsiti.cz/css/hr1.gif) no-repeat scroll center;
}

 以上代码在主流浏览器正常显示背景图、没有边框、宽度为80%。但在IE6、7浏览器中在背景图四周会有边框，并且这个边框是没办法用样式隐藏起来，具体效果如以下两图所示：

上图：IE8+、Chrome、火狐、Opera浏览器

上图：IE6、7 浏览器

 

但是我们能够在<hr>外层嵌套一个div，然后通过给div设置原来<hr>的样式，并且把<hr>隐藏起来。

HTML：

<div class="hr">
    <hr />
</div>

CSS：

div.hr {
    height: 15px;
    background: #fff url(http://www.sovavsiti.cz/css/hr1.gif) no-repeat scroll center;
}
div.hr hr {
    display: none;
}

以上代码就能够在所有浏览器中得到一样的表现效果，如下图所示：

总结

<hr> 标签各浏览器中存在的兼容问题如下：

• border: 0  —主流浏览器没有显示内容；IE6、7浏览器却显示一条2px的灰色横线
• 颜色  — 主流浏览器用 background-color；IE6、7浏览器 color
• 边距  — 主流浏览器上下边距正常；IE6、7浏览器比正常额外多出7px
• background-image  —主流浏览器正常显示，但IE6、7浏览器在背景图四周会出现边框