0

我正在尝试使用圆角在我的菜单中编写跨浏览器翻转效果，但在 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

4

2 回答 2

0

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

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

behavior: url (http://www.miramarlab.com/PIE.htc);
于 2012-04-14T22:20:00.743 回答
0

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

于 2012-04-14T22:07:45.637 回答