IE 7+中帶有/不帶JavaScript的圓角？

Question

要在我的容器元素上創建圓角，我使用此CSS：

border-radius:12px; -moz-border-radius: 12px; -webkit-border-radius: 12px;

但是，IE似乎沒有識別和解釋border-radius屬性（至少版本為7-8，顯然是版本9的版本）。

有沒有一種解決方法可以完全用CSS（沒有腳本，沒有額外的標記）？

對於JavaScript / jQuery解決方案：我會使用基於這些的解決方案，如果我可以包含一個可以讀取我的CSS的腳本，解釋border-radius屬性（ 包括border-top-left-radius，border-top-right-半徑） ，並相應地應用角。 這存在嗎？

Answer 1

據我所知IE <9，在純CSS中無法做到這一點。

據記載，IE9具有邊界半徑支持。

有可用的 Javascript解決方法 ，但正如你所說，你不想實現它們，你有點卡住了。

除非你想使用圖像，否則如果你有靜態大小元素，這種方法很有效，但如果它們改變大小則不起作用。

除此之外，我沒有任何純粹的CSS解決方案，沒有大量的hacky標記。

---

更新 ：

我已經鏈接到一個可以為你做這個的資源， CurvyCorners jQuery將檢測DOM元素上-webkit-border-radius和moz-border-radius ，並使用一系列沒有的小DIV復制IE中的效果圖片。 您還可以告訴它將效果應用於特定元素。

---

更新＃2 ：

在Spudley建議檢查CSS3Pi之后 ，我非常建議這樣做，因為它使用僅適用於IE的CSS屬性behaviour ，因此它不會與其他瀏覽器混淆，也就是說這意味着沒有hacky標記添加到您的頁面（Curvy Corners添加了許多小div）並且沒有使用圖像。

希望能幫助到你 ：）

Answer 2

你想要一種方法來做到這一點，沒有腳本，沒有任何額外的標記。 這根本不可能。 IE7 / 8中缺少這個功能，讓IE進行操作的唯一方法是使用腳本或標記來模擬該功能。

最好的選項是僅影響IE並且對其他瀏覽器不可見的選項。 這意味着CSS3Pie優於所有其他選項，因為它使用的技術僅由IE支持。 它還允許您以與其他瀏覽器相同的方式在CSS中指定邊界半徑，使其更加一致。

就個人而言，我每次都會選擇這個解決方案。 到目前為止，它是IE中最干凈的解決方案。 忘記任何jQuery或純JavaScript解決方案; 他們幾乎都有這種或那種問題，以及涉及角圖形的標記選項; 只是不要想一想！

CSS3Pie相對於其他常見解決方案的真正好處是它使用基於矢量圖形的解決方案，而不是像CurvyCorners和其他人那樣將大量的div粘貼到您的文檔中。 這意味着CSS3Pie生成的圓角可以平滑地繪制，並且可以在元素本身及其后面的背景圖形上正常工作。 大多數其他解決方案在這些方面存在嚴重問題

我不知道為什么你反對使用腳本 - 特別是基於HTC的這樣的腳本不會妨礙其他腳本。 最糟糕的情況是用戶關閉了腳本。 在這種情況下，他們得到的只是方角; 這不是世界末日。

Answer 3

如果沒有腳本，我認為沒有辦法做到這一點。

我看到了這個項目： http ： //css3pie.com/

但它仍然需要將腳本作為HTC行為加載。

無論如何，我最好的答案就是在IE中留下角落（順便說一句，似乎IE9將支持邊界半徑）應用優雅的降級原則。

許多網站都這樣做，包括非常受歡迎的網站：請參閱twitter.com （它看起來只是IE中的平方）

Answer 4

你可以使用.htc作為邊界半徑。
link1 for htc files
link2 for htc files

我建議看看這個網站。
CSS3請

Answer 5

您正在談論的腳本/ jQuery解決方案確實存在，請查看jQuery Curvy Corners 。