在IE上刪除<hr />邊框樣式

爲什麼IE設法搞砸最簡單的東西？無論如何，我想用單個圖像替換正常的hr線，有點像 - § - 符號（在它的側面）。試圖讓它看起來優雅:)在IE上刪除<hr />邊框樣式

它似乎唯一的方法來實際擺脫邊界在IE中雖然是設置顏色：CSS值。這樣做會覆蓋設置爲background-image的所有內容，並將整個hr作爲顏色參數。

它不可能包裝在一個div甚至真的應用類作爲將使用該網站的客戶端使用的wysiwyg文本編輯器，我真的不喜歡黑客插入一個div包裹小時。

我是從jquery添加一個div塊封裝，但這似乎從根本上錯誤（霰彈槍vs核桃） - 任何建議嗎？

2009-07-01 Meep3D

http://blog.neatlysliced.com/2008/03/hr-image-replacement/

<style type="text/css"> 
    hr { 
     background: url(http://placekitten.com/800/100) no-repeat; 
     border: 0; 
     height: 100px; 
     width: 100%; 
    } 
</style> 
<!--[if IE 7]> 
<style type="text/css"> 
    hr { 
     display : list-item; 
     list-style : url(http://placekitten.com/800/100) inside; 
     filter : alpha(opacity=0); 
     margin-left: -10px; 
     width : 0; 
    } 
</style> 
<![endif]-->

看到它在這裏工作：jsFiddle

來源

2009-07-01 19:06:33 Detect

完全巧妙！誰提出這個比CSS更好的CSS！ – Meep3D 2009-07-01 19:28:27

那麼，你可以直接插入圖像，而不是使用< hr/>標籤。但是，我相當肯定你可以通過將其更改爲背景顏色來擺脫違規邊界。我的意思是，它並沒有真正消失，但至少它隱藏着：

hr{ 
    border: #XXXXXX; 
}

來源

2009-07-01 18:47:39 Peter

可惜IE不考慮HR邊框爲 '邊界'。如果設置邊框：1px＃f0f solid;它會在現有的斜切邊框周圍添加一個fuschia邊框。 FF + IE8的行爲，實際上實現了邊界：0;意味着我不想要一個邊界 - IE 7和更少，不是那麼多。 – Meep3D 2009-07-01 18:53:52

幸運的是，IE8能夠正常工作。所以有12年的希望。

如果您的背景顏色是固體，只需將邊框定義爲該顏色，然後消失。

來源

2009-07-01 18:49:06

幾乎，通過在背景圖像的_top_上放置邊框顏色（如果用顏色設置:)，IE會從勝利的下巴中失敗。頭腦非常混亂。而且我知道，我覺得我會爲IE6的'標準'編碼，直到我死亡。 – Meep3D 2009-07-01 18:56:20

您可以將邊框的顏色更改爲透明 - 無論如何，我認爲這種方法可行。

否則，您應該只使用圖像本身並廢除< hr/>標記。

來源

2009-07-01 18:50:55

在IE上刪除<hr />邊框樣式

回答

相關問題