我在IE8中遇到了圓角問題。我嘗試了幾種方法，但沒有成功。IE8中的CSS圓角

這裏是我的代碼：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Untitled Page</title> 

<style> 
body { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 0.8em; 
    padding: 2px; 
    margin: 2px; 
    color: #505050; 
    line-height: normal; 
} 
p { 
    margin: 4px; 
} 
.categoryheading3 { 
    -moz-border-radius-topleft: 5px; 
    -moz-border-radius-topright: 5px; 
    -webkit-border-top-left-radius: 5px; 
    -webkit-border-top-right-radius: 5px; 
    background-color: #297BB6; 
    color: #FFFFFF; 
    font-size: 16px; 
    font-weight: 700; 
    padding: 8px 0; 
    text-align: center; 
    margin: 0px; 
} 
.leftcolumn { 
    width: 174px; 
    padding: 8px; 
    float: left; 
    display: inline-block; 
    background-color: transparent; 
    /*--min-height: 500px*/ 
    overflow: hidden; 
} 
.lefttop { 
    display: inline-block; 
    width: inherit; 
    margin: 0 5px 2em 0; 
    float: left; 
    width: 160px; 
    background-color: #FFFFFF; 
    border: 2px solid #297BB6; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 
</style> 


</head> 
<body> 

<div class="leftcolumn"> 
    <div class="lefttop"> 
    <H4 class="categoryheading3">Heading</H4> 
    <p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text </p> 
    </div> 
</div> 
</body> 
</html>

這在Firefox中產生這樣的：

firefox example

但這在IE8：

IE8 makes me sad

如果任何人有任何提示我會非常感激！

編輯：約瑟建議使用pie.htc幫助，但我仍然與此元素不工作掙扎：

.categoryheading3 { 
    -moz-border-radius: 5px 5px 0 0; 
    -webkit-border-radius: 5px 5px 0 0; 
    behavior: url(PIE.htc); 
    background-color: #297BB6; 
    color: #FFFFFF; 
    font-size: 16px; 
    font-weight: 700; 
    padding: 8px 0; 
    text-align: center; 
    margin: 0px; 
}

來源

2011-08-16 falter

它看起來像我的像你的CSS是缺少標準的邊界半徑屬性 – ph33nyx

你的IE8屏幕截圖實際上看起來是城域用戶界面ish :) – Nikhil

的Internet Explorer（下9版本）本身不支持圓角。

有一個驚人的腳本，會神奇地爲你添加它：CSS3 PIE。

我用了很多次，效果驚人。

來源

2011-08-16 11:21:49

這適用於在各個角落都是圓形的元素，但我似乎無法讓它適用於只有左上角+右側的那個 - 有什麼建議？ – falter

@kevyn：你能告訴我你正在使用的CSS嗎？ CSS3 PIE僅支持簡寫屬性（'border-radius：5px 5px 0 0;'），而不是簡寫屬性（'border-radius-topleft：5px; etc.'）。 –

我編輯了我在OP中的CSS，並添加了行爲：url（PIE.htc）;進入這兩個元素。具有4個圓角的元素效果很好，但只有頂部2個角的元素沒有任何區別 – falter

由於Internet Explorer本身不支持圓角。所以一個更好的跨瀏覽器的方式來處理它將是在角落使用圓角圖像。許多着名的網站使用這種方法。

您還可以在網絡上找到圓形圖像生成器。一個這樣的鏈接是http://www.generateit.net/rounded-corner/

來源

2011-08-16 13:17:38 zixtor

這是一個非常古老的方法，我wouldnt推薦這一點。像PIE這樣的Lib可以在ie8中實現css3，並且是我們所需要的。 – Juan

看到這個帖子後，我不知道css3pie.com，一個非常有用的網站：

但測試它它沒有工作對我來說無論是什麼之後。但是我發現將它包裝在.PHP文件中工作正常。因此，而不是：

behavior: url(PIE.htc);

使用本：

behavior: url(PIE.php);

我把我的一個叫jQuery的文件夾中，所以我的是：

behavior: url(jquery/PIE.php);

因此後藤它們下載或得到它在這裏：

http://css3pie.com/download-latest

並使用他們的PHP文件。在PHP文件中，它解釋了一些服務器沒有配置正確的.HTC用法。這就是我的問題。

試試吧！我做了，它的工作。希望這也能幫助別人。

來源

2012-06-27 18:23:46 Chud37

不幸的是，這仍然沒有爲我在IE8上做任何事情:( – Vicer

這是因爲您尚未在.htc文件的web服務器上配置正確的MIME類型，請參閱：http：// stackoverflow。com/a/4672959/229587 – NickG

http://fetchak.com/ie-css3/適用於IE 6+。如果css3pie不適合你，請使用它。

來源

2012-10-05 10:44:41 Gautham

PIE。htc對我很好（http://css3pie.com/），但有一個問題：

你應該寫絕對路徑PIE.htc。當我使用相對路徑時，它不適合我。

來源

2013-02-15 09:07:59 Ievgen

它看起來像相對路徑是不相對於這個css文件，但相對於docroot而不是 – ph33nyx

ph33nyx幾乎是正確的。使用Internet Explorer行爲時，被引用的文檔與調用HTML文件相關，而不是CSS文件。當你使用它的時候要注意這一點，這樣你就不會發瘋，試圖找出它不工作的原因。 –

我使用它的相對路徑爲'behavior：url（../ PIE/PIE.htc）;'它工作正常。 – erdomester

Rounded corners in IE8

的Internet Explorer 8（或更早版本）不支持圓角，但是有一些其他的解決方案，您可以考慮：

使用圓角Images改爲（this發電機是一個很好的資源）
使用jQuery Corner plugin從here
從here（Pro的&反對的here）
結帳CSS Juice從here
使用一個名爲CSS3 PIE非常好劇本另一個好的劇本是IE-CSS3從here

即使CSS PIE是最流行的解決方案，我建議你檢查所有其他的解決方案，並選擇最適合您的需求。

希望它有用。祝你好運！

來源

2013-05-07 15:16:13

IE8中的CSS圓角

回答

Rounded corners in IE8

相關問題