我在使用JQuery Library“Rounded Corners”在IE中工作时遇到了问题。我想要做的就是在Internet Explorer中模拟div上的border-radius。我已经在Firefox中使用了插件,但我认为这是因为这个插件利用了CSS属性。我也让它在IE中工作,但仅限于基本的DIV。
以下是插件的主页:http://jquery.malsup.com/corner/
以下是代码:
<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]-->
<div id="mydiv"></div>
<div id="ie-shadow"> </div>
<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>
答案 0 :(得分:6)
我打算提出一个更好的选择:PIE.htc。
在此处下载:http://css3pie.com/
<强> USAGE 强>
将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 for 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);
});
}
});