jquery - 在 ie 中使用带有 jquery 的圆 Angular

Question

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

Answer 1

你可以在没有 jquery 的情况下(甚至没有图像)只使用 CSS 来完成它，它会更好。请阅读这篇文章:http://jonraasch.com/blog/css-rounded-corners-in-all-browsers .希望这会有所帮助。