在 ie 中使用带有 jquery 的圆角答案

【问题标题】：using round corners with jquery in ie在 ie 中使用带有 jquery 的圆角
【发布时间】：2012-04-15 06:30:52
【问题描述】：

我正在尝试使用圆角在我的菜单中编写跨浏览器翻转效果，但在 ie 中不起作用。我试图使用 PIE 甚至一些插件，但它们没有工作。

这是我的代码：

$("document").ready(function() {

var ancho = $('nav li.nav_active').width()+24;

    $('nav li.nav_active').css({
            'background-color' : '#282828',
            "height" : ancho+"px",
            'margin-top' : "-"+(ancho-48)/2+"px",
            '-moz-border-radius' : ancho/2+"px",
            '-webkit-border-radius' : ancho/2+"px", 
            '-khtml-border-radius' : ancho/2+"px",
            'border-radius' : ancho/2+"px", 
            'behavior' : 'url(../PIE.htc)',
            '-webkit-box-shadow' : '0 8px 6px -6px black',
            '-moz-box-shadow' : '0 8px 6px -6px black',
            'box-shadow' : '0 8px 6px -6px black',
            'border' : 'none'
            });
            $('nav li.nav_active a').css({
            "line-height" : ancho+"px",
            "color" : "white",
            "font-family" : "'E-BoldCondensed'",
            });






$(function() {
    $('nav li:not(.nav_active)').mouseover(
        function () {
            var ancho = $(this).width()+32;
            $(this).css({
            "height" : ancho+"px",
            'margin-top' : "-"+(ancho-48)/2+"px",
            '-moz-border-radius' : ancho/2+"px",
            '-webkit-border-radius' : ancho/2+"px", 
            '-khtml-border-radius' : ancho/2+"px",
            'border-radius' : ancho/2+"px", 
            'behavior' : 'url(../PIE.htc)',
            '-webkit-box-shadow' : '0 8px 6px -6px black',
            '-moz-box-shadow' : '0 8px 6px -6px black',
            'box-shadow' : '0 8px 6px -6px black',
            });
            $(this,'a').css({
            "line-height" : ancho+"px",
            });
        });
});

$(function() {
    $('nav li:not(.nav_active)').mouseleave(
        function () {

            $(this).css({
            "height" : "",
            'margin-top' : "",
            '-moz-border-radius' : "",
            '-webkit-border-radius' : "", 
            '-khtml-border-radius' : "",
            'border-radius' : "",
            '-webkit-box-shadow' : '',
            '-moz-box-shadow' : '',
            'box-shadow' : '',

            });
            $(this,'a').css({
            "line-height" : '',
            });
        });
}); 

$(function() {
    $('nav li').mousedown(
        function () {
            var ancho = $(this).width()+32;
            $(this).css({
            "height" : ancho+"px",
            'margin-top' : "-"+(ancho-48)/2+"px",
            '-moz-border-radius' : ancho/2+"px",
            '-webkit-border-radius' : ancho/2+"px", 
            '-khtml-border-radius' : ancho/2+"px",
            'border-radius' : ancho/2+"px", 
            'behavior' : 'url(../PIE.htc)',
            '-webkit-box-shadow' : '',
            '-moz-box-shadow' : '',
            'box-shadow' : '',
            });
            $(this,'a').css({
            "line-height" : ancho+"px",
            });
        });
});

});

这在我网站的链接中：www.miramarlab.com

【问题讨论】：

你为什么不把所有这些都放在一个类中并使用addClass() 而不是css() ??
哪个版本的IE？您是否尝试过静态设置 PIE 角，而不是使用 JS？我敢打赌 PIE 不适用于动态添加的 CSS。
我使用 css() 是因为我需要获取 li 的宽度值，以便计算角的半径来制作一个完美的圆。

标签： jquery css internet-explorer

【解决方案1】：

您可以在没有jquery（甚至没有图像）的情况下仅使用CSS 来做到这一点，它会更好。请阅读这篇文章：http://jonraasch.com/blog/css-rounded-corners-in-all-browsers。希望这会有所帮助。

【讨论】：

【解决方案2】：

你应该调用相对于 html 页面的 htc 文件，而不是 css。也许这就是罪魁祸首，htc 文件有一个特定的 mime 类型，应该添加到 .htaccess 文件中。

将htc文件保存在根目录下，用绝对路径加载：

behavior: url (http://www.miramarlab.com/PIE.htc);

【讨论】：