如何使JQuery插件“圓角”起作用？ （或建議一個更好的選擇）

Question

我在讓jQuery庫“ Rounded Corners”在IE中工作時遇到問題。 我要做的就是在Internet Explorer中的div上模擬邊界半徑。 我已經使該插件在Firefox中工作，但是我認為這是因為該插件利用了CSS屬性。 我也可以在IE中使用它，但只能在基本DIV上使用。

這是插件的主頁： http : //jquery.malsup.com/corner/

這是代碼：

的CSS

<style>
#mydiv { /*basic CSS for the DIV*/
    border: 1px solid #76B4EA;
    border-bottom: none;
    box-shadow: inset -10px 10px 30px #e0e0e0, 2px -2px 1px #707070;
    background: #fff;
    width: 200px;
    height: 80px;
    margin-top: 21px;
    z-index: 3;
    margin-left:2px; 
    position: absolute
}
#ie-shadow { /*code for a cross-browser shadow*/
    display: none;
}
</style>
<!--[if lte IE 8]>/*more code for the cross-browser shadow*/
<style>
#ie-shadow {
    display: block;
    position: absolute;
    top: 17px;
    left: 2px;
    width: 200px;
    height: 80px;
    z-index: 1;
    background: #000;
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='2', MakeShadow='true', ShadowOpacity='0.40');

}
</style>
<![endif]-->

的HTML

<div id="mydiv"></div>
<div id="ie-shadow">&nbsp;</div>

Java腳本

<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 type="text/javascript">
$('#mydiv').corner("rounded top 10px keep cc:transparent");
</script>

Answer 1

我將建議一個更好的選擇：PIE.htc。

在此處下載： http : //css3pie.com/

用法

將PIE.htc文件提取到您的根目錄。 在CSS中，您可以執行以下操作：

.round-em {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  behavior: url('PIE.htc');
}

注意： PIE.htc的位置是相對於HTML文件而不是CSS文件的。 另外，您只能使用border-radius的簡寫。 例如，在將hack用於IE時，不能指定border-top-left-radius 。

您可以通過添加IE條件代碼（PIE.htc在IE9 +上不能很好地發揮作用）進一步采取以下步驟：

.round-em {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

<!--[if lt IE 9]> .round-em { behavior: url('PIE.htc'); } <![endif]-->

編輯

由於無法跨域加載PIE.htc腳本，因此可以使用PIE.js。 這是鏈接： http : //css3pie.com/documentation/pie-js/

這里有托管版本： http : //cdnjs.cloudflare.com/ajax/libs/css3pie/1.0beta5/PIE.js

如何使用PIE.JS

首先，通過IE條件調用腳本：

<!--[if lt IE 9]> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/css3pie/1.0beta5/PIE.js"></script> <![endif]-->

接下來，使用jQuery遍歷以round-em為類的每個元素。 然后，使用PIE.attach方法並將this上下文作為參數傳遞。

$(function() {
  if (window.PIE) {
    $('.rounded').each(function() {
      PIE.attach(this);
    });
  }
});