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

css ではなく、html ページに関連する htc ファイルを呼び出す必要があります。おそらくそれが原因で、htc ファイルには特定の MIME タイプがあり、.htaccess ファイルに追加する必要があります。

htc ファイルをルート ディレクトリに保存し、絶対パスでロードします。

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

only をjquery使用しなくても (画像がなくても)実行できます。CSSこの記事を読んでください: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers . これが役立つことを願っています。

于 2012-04-14T22:07:45.637 に答える