瞭解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瀏覽器在背景圖四周會出現邊框