IE8的邊界半徑

Question

我在IE8上有邊界半徑的問題，到現在為止我使用了pie.js，但我不推薦這個js庫，因為它是錯誤的。 如果你有一個沒有多少html頁面的小網站，那么使用該庫是可以的，但如果你有一個繁重的應用程序，其中使用了許多不同的框架，那么就不可能使用它。 CurvyCorners或其他大型庫的相同行為。

因此，如果任何人都可以幫助我使用一個小的jQuery或javascript插件來做IE 8上的border-radius，我將感激生命。

Answer 1

試試這個：

要求：

<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/

Answer 2

如果沒有使用你在問題中描述的庫，我認為你不能在IE8中做彎角。

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

Answer 3

根據微軟的說法：

其他圓角解決方案

我們想指出網上提供的大量替代解決方案。 除了單獨的圓角解決方案之外，還有一些站點具有經常更新的圓角解決方案列表，這些解決方案與多個版本的Internet Explorer和其他瀏覽器兼容。

這里列出了一些我們最喜歡的聚合圓角解決方案的網站。 它們沒有特別的順序，並且包含任何鏈接並不意味着Microsoft認可該網站。

• CSS-Discuss Wiki，RoundedCorners： http ：//css-discuss.incutio.com/？page = RoundedCorners

• SmileyCat，CSS Rounded Corners“綜述”： http ：//www.smileycat.com/miaow/archives/000044.php

• CSS Juice，25個帶有CSS的圓角技術： http ： //www.cssjuice.com/25-rounded-corners- techniques-with-css /

Answer 4

看看這篇文章： http ： //www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

它涵蓋了IE7 / 8中特別圓角和框陰影。

以及如此多的例子

http://blue-anvil.com/jquerycurvycorners/test.html

Answer 5

我過去使用過border-radius.htc 。

唯一的痛苦是CSS Urls是相對於CSS文件的。 HTC是相對於頁面的。

你可以在這里下載演示。

Answer 6

為什么不使用css'：before和：after偽類來添加彎角。

您對Tom Will的回答的評論表明您有很多表格輸入嗎？

我認為它們的寬度大多是均勻的。

只需創建一些類，如curved-std-width ， curved-lge-width ， curved-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>');

然后風格恰當。

Answer 7

你為什么不使用jQuery的角落插件 ？

您可以輕松地將角應用於具有特定類名或ID的任何元素; 例如：

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

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

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

Answer 8

這很難看但如果您事先知道輸入字段的背景顏色（這可能是提交按鈕的問題）可能會有效： http ： //jsfiddle.net/563c5/1/

我不知道在普通計算機中渲染大量輸入字段時它會如何表現。

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

Answer 9

我建議給Modernizr一個去，關於它的好處是你可以使用它來替換舊瀏覽器中大多數（如果不是全部）不受支持的CSS3。 我已經在許多大型網絡應用程序上使用它而沒有任何戲劇性。

您還可以查看我相信有一些圓角腳本的jQuery UI庫 。

我希望這有幫助...祝你好運！

Answer 10

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

在這些非css3符合瀏覽器的情況下大量使用css3元素，表現不佳，很可能是因為他們的系統不是最新的，導致它們極其遲鈍。 因此，他們退化到正常角落是有好處的。

如果你真的希望它看起來很好，即你最好使用圖像精靈背景，或者你會改變以驅逐一些訪問者以解決滯后問題。

Answer 11

不確定它是否被之前的貢獻者所覆蓋，但我主要使用dd_roundies庫，而且僅使用圓角就可以了。 雖然使用IE過濾器混合角落通常太多了。

Answer 12

你試過這個： http ： //jquery.malsup.com/corner/

Answer 13

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

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

支持的CSS3功能

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

Answer 14

您可以使用圓角圖像來邊界div。 例：

http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml

或者你做了一些魔術：

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

Answer 15

只是另一個基於JavaScript的解決方案： Nifty Corners Cube 。 它作為GNU GPL發布，不需要jQuery。

Answer 16

使用此代碼在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>