風格水平規則

有沒有更好的方式使用CSS來設計<hr />標籤，這是跨瀏覽器一致的，並且不涉及圍繞它包裝div？我正在努力找到一個。風格水平規則

我發現最好的方法，如下：

CSS

.hr { 
    height:20px; 
    background: #fff url(nice-image.gif) no-repeat scroll center; 
} 
hr { 
    display:none; 
}

HTML

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

這樣做的經典方式是圍繞<小時>創建一個包裝和樣式。但我已經想出了圖像的CSS技巧更換元件，而不需要額外的標記：

對於非MSIE瀏覽器：

hr { 
    border : 0; 
    height : 15px; 
    background : url(hr.gif) 0 0 no-repeat; 
    margin : 1em 0; 
}

此外，對於MSIE：

hr { 
    display : list-item; 
    list-style : url(hr.gif) inside; 
    filter : alpha(opacity=0); 
    width : 0; 
}

爲見entry on my blog進一步的信息和行動中的訣竅的例子。

2008-10-20 12:18:01 Borgar

如果設置顯示器block應該表現得更像一個<div>。

你的回答，你應該完全取消小時，只使用div

2008-10-20 11:55:49 vfilby

我不同意。一個橫向規則雖然表面上是一個視覺元素，但仍然具有語義意義，而一個div卻沒有。 – nickf 2008-10-20 13:19:55

我傾向於同意這一點，它在內容上的原因。但是將其設置爲顯示塊可能值得一看。 – 2008-10-20 14:43:45

你可以將背景圖像應用到前一元素的底部，也許有點微胖的。這樣你就可以擺脫任何多餘/非語義標記。

2008-10-20 12:10:43

回答