2012-02-24 124 views
36

我在IE8上有一個border radius的問題,直到現在我用了pie.js,但是我不推薦這個js庫,因爲是越野車。如果你有一個小網站沒有多少html頁面,那麼使用這個庫是不行的,但是如果你有一個使用了很多不同框架的重型應用程序,那麼就不可能使用它。 CurvyCorners或其他大型圖書館的行爲相同。IE8邊界半徑

因此,如果任何人都可以用小jQuery或JavaScript插件來幫助我在IE 8上做邊界半徑,我將感激生命。

+94

在99%的情況下邊界半徑不是一個設計是至關重要的。採用優雅的降解技術,將IE8留在方角。 – 2012-02-24 14:00:43

+0

你可以試試這個:http://jquery.malsup.com/corner/。但是我同意,如果可能的話,你應該讓IE8離開。 – bfavaretto 2012-02-28 15:44:02

+0

unfortunatley我必須在ie8上有相同的界面,chrome和ff – mcmwhfy 2012-02-28 15:47:32

回答

18

使用你在你的問題中描述的庫的缺點,我不認爲你可以在IE8中做彎曲的角落。

如果您真的想要它們,您可以使用圖像來提供彎曲的角落效果,代價是增加的帶寬和雜亂的代碼。

+0

嘗試在一個窗體中執行此操作,在該窗體中,您有150個以上的輸入,選擇,textaarea和其他要添加邊框半徑的邊框。結果是:該頁面將在幾分鐘內打開。正因爲如此,我需要一些像jQuery,js函數一樣簡單的東西。 – BurebistaRuler 2012-02-24 07:43:55

+0

的確如此。根據我的經驗,你將被卡住或者有棱角,或者使用你已經說過的圖書館是不可能的。 – 2012-02-24 07:52:57

+0

是的,播種我們如何解決精彩的IE8?我喜歡在這個世界上認爲是解決這個問題的人。 – BurebistaRuler 2012-02-24 07:59:54

6

根據Microsoft

其他圓角解決方案

我們想指出,在網絡上可用的替代解決方案的丰度。除了個別的圓角解決方案外,還有一些站點經常更新圓角解決方案列表,這些解決方案與多個版本的Internet Explorer和其他瀏覽器兼容。

這裏列出了我們最喜歡的聚合圓角解決方案網站。它們以不特定的順序呈現,並且包含任何鏈接並不意味着Microsoft對該網站的認可。

3

爲什麼不使用css':之前和之後:僞類添加彎曲的角落。

你對湯姆威爾的回答的評論表明你有很多表單輸入是正確的嗎?

那麼我認爲他們將在寬度上大體統一。

只需創建一些類,如curved-std-widthcurved-lge-widthcurved-sml-width然後你就可以在你的CSS這樣做:

.curved-std-width:before { 
    height: 5px; 
    background: url('curved-top-5px.png'); 
} 

.curved-std-width:after { 
    height: 5px; 
    background: url('curved-bottom-5px.png'); 
} 

類似的東西應該工作得很好,不用您去之前和之後增添無窮的HTML形式輸入。

否則,你可以使用jQuery以及可能做到這一點:

$(':input').before('<div class="left-top-corner"></div><div class="right-top-corner"></div>').after('<div class="left-bottom-corner"></div><div class="right-bottom-corner"></div>'); 

然後風格恰如其分。

+0

你有這樣的例子,看看它是如何工作的? – BurebistaRuler 2012-02-28 15:59:16

+1

@burebistaruler我認爲你不能指望他做一些圓角的圖形,然後將它們託管在某個地方,只是爲了幫助你這個 – HerrSerker 2012-03-02 08:32:44

3

爲什麼不使用jQuery的corner plugin

您可以很容易地將角落應用於任何具有特定類名或ID的元素;例如:

$("#box1").corner(); 

它還允許您修飾或修改要裝飾元素的角落效果的類型。

您還可以使用其他JavaScript解決方案,如CurvyCorners甚至某些CSS solutions。另一個選擇是使用JavaScript來包裝<div>您的表單輸入的元素,並使用CSS的背景圖像來模擬圓角的外觀。有關最後解決方案的說明,請參閱this tutorial

+0

已經嘗試過這個插件...它迫使你有一個背景顏色。 – BurebistaRuler 2012-02-28 15:56:28

+0

這不是真的,我相信你可以使用.corner(cc:xxx)來定義角元素的顏色? (其中xxx是您選擇的顏色)。 – Houdmont 2012-03-06 12:53:28

1

我會推薦給Modernizr一個去,關於它的好處是你可以用它來替換大多數(如果不是全部的話)不支持的舊版瀏覽器CSS3。我已經在一些大型網絡應用程序中使用它,沒有任何戲劇。

你也可以看看我認爲有一些圓角腳本的jQuery UI library

我希望這有助於...祝你好運!

+1

嗯我用modernizr試過一次,但知道有些東西沒有用。你有一個用modernizr border-radius的小例子來測試IE8,看看它是如何工作的。 – BurebistaRuler 2012-02-28 16:10:23

+0

查看Modernizr後退我使用和研究一點作爲您的評論的結果,它將需要在角落使用圖像 - 不再酷,所以這導致我做了一些研究,我發現[這個鏈接](http://blue-anvil.com/jquerycurvycorners/test.html),在我的IE8測試以及在IE9中測試IE6,IE7和IE8瀏覽器模式,它運行良好。我希望這能幫助你多一點。 – Ryan 2012-02-28 16:59:36

2

這是醜陋的,但如果你預先知道輸入字段的背景顏色(可與提交按鈕的問題)可能的工作:http://jsfiddle.net/563c5/1/

我不知道渲染大量輸入的時候會如何表現在一臺普通的電腦上。

IE8支持內聯CSS圖像,並且所有四個圓角只需要一個小圖像。依賴角落圖像的任何解決方案實際上可能只需要幾個額外的帶寬字節。

1

你應該使用替代的pie.htc,它的類似的東西,但較少的錯誤,無論哪種方式,我不推薦它。

在這些非css3兼容瀏覽器上大量使用css3元素,表現不佳,可能是他們的系統不是最新的,導致它們非常滯後。所以對他們來說,降到正常的角落是有好處的。

如果你真的想讓它看起來不錯,比如你最好使用圖片精靈背景,或者你要改變,以趕走一些訪問者的滯後問題。

1

不知道它是否被前面的貢獻者所覆蓋,但我主要使用dd_roundies庫,並且單獨使用圓角時它工作正常。混合角落與IE過濾器通常是太多問不過。

40

試試這個:

要求:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://malsup.github.com/jquery.corner.js"></script> 

的Javascript:

$('.box').corner(); 

HTML:

<div class="box">Hello</div> 

CSS:

box{ 
    width:150px; 
    height:28px; 
    padding:10px; 
} 

更多的例子: http://jquery.malsup.com/corner/

+1

這個庫很棒。謝謝你解決我的圓角噩夢 – onof 2012-10-10 10:54:45

+9

然而,這個特殊的lib在IE8中每個表單輸入周圍添加了大量的div容器(我只計算了22個輸入... wtf?)。這必須對問題中描述的大量輸入的大頁面產生負面的性能影響。 – Rocco 2012-11-06 10:43:31

1

使用此:http://css3pie.com/

PIE使得Internet Explorer中6-9能夠呈現幾個最有用的CSS3裝飾功能。

支持CSS3特性

border-radius 
box-shadow 
border-image 
multiple background images 
linear-gradient as background image 
+0

閱讀問題描述;) – BurebistaRuler 2012-03-06 12:57:41

0

又一個基於JavaScript的解決方案:Nifty Corners Cube。它作爲GNU GPL發佈,不需要jQuery。

0

使用此代碼來獲取圓角在IE 6+

<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/JavaScript" src="http://malsup.github.com/jquery.corner.js</script> 
<script> 
    $('#logo-navsection').corner(function() { 
     $("this").css("border-top", "0px 0px opx 10px")     
    }); 
</script> 
+0

它增加了我不想要的邊框顏色,因爲它與背景圖像衝突。好主意雖然! – Si8 2014-02-24 16:43:00