CSS3邊框半徑和Internet Explorer 8

我在我的網頁中使用CSS3邊框半徑樣式，我希望它在跨主要瀏覽器（包括IE8）的跨瀏覽器兼容。CSS3邊框半徑和Internet Explorer 8

因此，我正在嘗試使用border-radius.htc文件來實現此目的。無論在我的CSS樣式使用邊界半徑，我已經編寫類似：

-webkit-border-radius: 6px 6px 6px 6px; 
    border-radius: 6px 6px 6px 6px; 
    behavior:url(border-radius.htc);

不幸的是，當我檢查在IE8的網頁，所有具有邊界半徑行爲的背景，最終完全無法顯示。

的網頁是在http://www.domainandseo.com/portfolio/dominos/index.html

任何建議將高度讚賞。

來源

2012-11-08 Alex Zahir

早於9的Internet Explorer版本不支持此屬性。檢查compatibility matrix。如果你想在舊的瀏覽器中使用圓角，你必須通過一個帶有圓形邊框圖像的容器來實現它們。

來源

2012-11-08 06:40:21

是的，他們不支持CSS3屬性。但是有某些腳本等操縱早期瀏覽器來實現css3效果。 border-radius.htc就是這樣的瀏覽器半徑屬性。但現在border-radius.htc在我的IE8網頁上無法正常工作，而不是爲背景顯示邊框半徑，結果根本沒有顯示背景。 –

-3

試試這個它會工作：只

#main{position:relative;}

提到這個ID在IE特定的樣式表。

來源

2012-11-08 07:02:19 Gopikrishna

嘗試使用JavaScript polyfill而不是嘗試加載.htc文件可能會更好。想到的是Mike Alsup的Corner jQuery插件，發現於http://jquery.malsup.com/corner/。你可以使用條件註釋只加載它在IE 8或更早版本：

<!--[if lte IE 8]> 
<script src="path_to_your_scripts_folder/jquery.corner.js"></script> 
<script> 
    $(function(){ 
     $('your_selector_here').corner('corner_radius_in_pixels'); 
    }); 
</script> 
<![endif]-->

來源

2012-11-08 07:17:01

請注意，如果您正在使用另一個填充陰影，它們將不會顯示出非常漂亮的效果。 – baacke

我不知道你正在使用的「border-radius.htc」的文件，但如果你使用類似CSS3 PIE ，它是a known issue。從他們的網頁：

我知道解決這個問題的唯一辦法是要麼：

使目標元素的位置是：相對的，或

使祖先元素的位置是：相對的，給它一個z-索引。

這兩種解決方法在子元素定位和z-index堆棧方面都可能具有潛在的不需要的副作用。 PIE很容易迫使一方或另一方本身，而是：

一方或另一方可以根據具體的情況更合適，所以筆者CSS需要能夠控制哪一個被選擇。

強制位置：CSS外部的相對位置會使IE與其他瀏覽器不同步，導致混淆不一致。

來源

2012-11-08 07:31:52 MarcoK

CSS3 PIE要求曾經是相對於HTML，而不是比說您是通過CSS加載圖像或@字體面字體不同的CSS的路徑。您可能會發現將絕對URL放在您的CSS中的PIE.htc文件中效果最佳。

來源

2013-05-23 17:41:29

CSS3邊框半徑和Internet Explorer 8

回答

相關問題