2010-06-01 90 views
6

在除IE7和更低版本之外的其他瀏覽器中,hr在hr標記周圍顯示一個我不想要的邊界。IE中的Hr標記 - 刪除邊框

<!--[if lte IE 7]> 
<style type="text/css"> 
hr { 
    margin: -3px 0 0 0; 
    padding: 0; 
    height: 19px; 
    border: none; 
    outline: none; 
    background: url("img/split.png") center no-repeat; 
} 
</style> 
<![endif]--> 

我試過這個解決方案,但它似乎仍然有一個邊框。

它看起來像這樣:

alt text http://i46.tinypic.com/dpdabm.jpg

如何擺脫它?

+2

「News」?這看起來像一個標題,所以只需將背景應用到該標題的頂部,或者應用到它之前的元素的底部。 – reisio 2010-06-01 23:43:02

+1

我也會投票反對使用HR-s這種解決方案。 – f13o 2010-06-01 23:53:49

回答

4

爲了避免這些問題,您可以改用DIV標籤。爲了使訪問,把人力資源裏面是這樣的:

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

然後應用樣式到它:

.ruler { border-top: 1px solid black; } 

.ruler hr { display: none; } 

這將隱藏HR,使DIV「水平尺」。

1

不同的瀏覽器對'hr'元素有不同的模型。這就是爲什麼我使用這個:

hr { 
height: 1px; 
color: #ccc; 
background-color: #ccc; 
border: 0; 
} 

這適用於所有主流瀏覽器。只有一個問題:IE7和利潤...只有

border:0px 

border:none 

是不是一個有效的規則

+0

+1是的,'IE'總是一個問題,無論如何。 – Wh1T3h4Ck5 2012-10-20 14:09:33