border-image：針對IE的解決方法

有沒有針對IE的任何解決方法，這使我可以使用border-image？我正在開發一個網站，並且它在每個瀏覽器中都能正常工作，除了IE。我需要模仿這些酒吧border-image：針對IE的解決方法

我可以使用ie-css3.htc技巧，但border-radius只有四角一起工作（不適用於此，「導致頂部邊框不四捨五入）和filter CSS屬性（對於漸變）根本不適用於border-radius（它填充了忽略邊界半徑限制的整個元素）。如果沒有這方面的解決方法，如何做到這一點最好的方法？

來源

2010-08-25 Rodrigo Souza

您定位的是哪個IE版本？因爲IE6已經死了*（或者更好，*從未出生*）：我們都希望這樣，但不幸的是...... :-( – 2010-08-25 15:25:47

？應該是技術？ – 2010-08-25 15:46:40

@ ring0 hahaha LOL – chepe263 2012-04-13 21:46:36

.png文件是不必要的。只需使用CSS3餅圖：http://css3pie.com/

完全擺脫專有的IE過濾器，並使用（heh，專有）-pie-background:linear-gradient(values)來代替。

工程與和諧單獨圓角：border-radius: 0 5px 5px 5px

在這種情況下，左上角就沒有邊界半徑，另一個角落（順時針）將在每次爲5px。

然後以相同的風格使用behavior:url(path_to/pie.htc);。

還請記住，path_to是相對於正在查看的文檔，而不是調用它的CSS文件。確保檢查它是否不起作用。

我已經測試了這麼多次，它的作用就像一個魅力。

其他信息：

如果有時你的造型出現，消失，試着給你的元素的position:relative和指定z-index。 CSS3 PIE的工作方式是使用z-index，如果沒有指定，可以在背景下面顯示樣式漸變（以及圓角等），特別是在使用負邊距或類似奇怪的東西時。

來源

2011-12-01 21:39:01

不，但ie-css3.htc的東西可能是唯一可能的解決方法，如果這是我正在考慮的。還是有另一個我想到的JS腳本解決了這個問題？不記得了。

來源

2010-08-25 15:31:13 Rob

唯一真正的解決方案可能是讓你的角落或側面的圖像。它看起來好像一切都是相同的大小隻是有一個可擴展的寬度。所以它應該很容易編碼，幾乎沒有負載的延遲時間。

這就是爲什麼我堅持使用被證明可用的概念。意思是，如果你的目標市場使用IE7 +，你應該在設計和編程時有意識，所以你不會遇到這樣的小問題。

所有這些CSS3和HTML5都是很棒的東西，但作爲開發人員，我們仍然只限於每個人看到的東西。如果你想爲所有用戶提供一個平坦的遊戲場地，那麼你可以依賴新的編碼實踐，直到你可以在所有瀏覽器中通過板子做邊界半徑等事情。

另一方面，你可能不關心IE用戶看到什麼;因此，對於使用其他瀏覽器的用戶，您可以使用不同的瀏覽器增強風格。

來源

2010-08-25 16:15:17 Brad

什麼是IE6 + – 2010-08-25 16:41:25

你是指製作方的圖像？ – Brad 2010-08-25 22:26:36

用合適的4個角切口拍攝真正的紅色漸變圖像，將其保存爲圖像（因爲您不支持IE6，因此將其保存爲圖像上的透明PNG）。

對於每個這些標題區，你會包裝它像這樣：

<div class="outer"><div class="inner">ENQUETE</div></div>

您可以設置此圖片作爲這兩個因素的背景下，抵消他們中的一個，讓你可以在兩個開始圖像端蓋並結束。調整間距/移位，直到兩個圓段都清晰。

.outer { 
    background: transparent url(redgradient.png) no-repeat 0px 0px; 
    margin: 0 10px 0 0; 
} 
.inner { 
    background: transparent url(redgradient.png) no-repeat 100% 0px; 
    position: relative; 
    left: 10px; 
}

來源

2010-08-26 05:14:10 babtek

點擊完全相同的問題，並通過條件註釋返回IE < = 9。但是，現在這個解決方案已經被打破，最新的IE10 prev4仍然不支持邊界圖像，也不支持IE條件註釋。回到繪圖板...

處理我們應該真正使用的解決方案：功能測試。

使用Modernizr，它將CSS3類名添加到html標籤並測試邊界圖像（做web標準方式）或無邊界圖像（爲IE用戶提供最好的可以做但不符合相同的體驗瀏覽器，並顯示一個IE可見鏈接到您的網頁，告訴他們如何獲得更好的體驗：例如下降IE）。

來源

2012-08-02 14:59:17 Willabee

border-image：針對IE的解決方法

回答

相關問題