Question

我正在尝试使用圆角在我的meny中编码跨浏览器翻转效果，但是在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。希望这会有所帮助。

Answer 2

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

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

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

使用圆角和jquery即

2 个答案: