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

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

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

 

一、border:0 的表现效果

HTML：

<hr />

CSS：

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

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

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

 

上图：IE六、7 浏览器

 

 

二、设置<hr>的颜色

 

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

 

HTML：

<hr />

 CSS：

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

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

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

上图：IE六、7 浏览器

 

 

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

在IE六、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，而在IE六、7浏览器是27px，具体效果如如下两图所示：

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

上图：IE六、7 浏览器

 

所以，为了达到全部浏览器的效果同样，咱们须要写兼容IE六、7的上下边距样式，其上下边距为主流浏览器数值减去7。如上面代码上下边距为20px，则 IE六、7浏览器的就为13px，对应的兼容样式写法是： *margin-top: 13px; *margin-bottom: 13px; 。

 

四、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%。但在IE六、7浏览器中在背景图四周会有边框，而且这个边框是没办法用样式隐藏起来，具体效果如如下两图所示：

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

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