2

私は自分のホームページで jquery スライディング ボックス アニメーションを使用しています: http://sandstonetombstonesuppliers.co.za/

現在、標準の HTML 5 doctype を使用しています。これにより、IE (8 および 9) の CSS で問題が発生します。リンクにアクセスすると、最初の 2 つのボックスに透明なテキスト アニメーションが表示され、部分的に非表示になっていることがわかります。上の 2 つのボックスにカーソルを合わせると、意味が表示されます

削除すると問題なく動作しますが、全体的なレイアウトが左に移動し (中央ではなくなり)、メニュー リンクに青い下線がなくなりました - 次のリンクを参照してください: http://sandstonetombstonesuppliers.co.za/index2.html

なぜそれをしているのですか？

これが私のマークアップです：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bluegig Distribution</title>

    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="shortcut icon" href="/images/favicon.ico"/>
    <link rel="stylesheet" type="text/css" media="screen" href="css/slidingboxes.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />   
    <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>  
        <!--[if lt IE 9]>
            <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
        <![endif]-->
        <!--[if lte IE 7]>
            <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
        <![endif]-->
</head>

更新: を使用すると、Chrome や FF と同じようにスライド ボックスで同じ問題が発生するようです ???

Javascript:

$(document).ready(function(){
                //To switch directions up/down and left/right just place a "-" in front of the top/left attribute

                //Horizontal Sliding
                $('.boxgrid.slideright').hover(function(){
                    $(".cover", this).stop().animate({left:'446px'},{queue:false,duration:500});
                }, function() {
                    $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:500});
                });
                //Diagnal Sliding
                $('.boxgrid.thecombo').hover(function(){
                    $(".cover", this).stop().animate({top:'357px', left:'325px'},{queue:false,duration:500});
                }, function() {
                    $(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:500});
                });

                //Full Caption Sliding (Hidden to Visible)
                $('.boxgrid.captionfull').hover(function(){
                    $(".cover", this).stop().animate({top:'257px'},{queue:false,duration:250});
                }, function() {
                    $(".cover", this).stop().animate({top:'357px'},{queue:false,duration:250});
                });
                //Caption Sliding (Partially Hidden to Visible)
                $('.boxgrid.caption').hover(function(){
                    $(".cover", this).stop().animate({top:'120px'},{queue:false,duration:250});
                }, function() {
                    $(".cover", this).stop().animate({top:'317px'},{queue:false,duration:250});
                });
            });

ありがとう

4

2 に答える 2

1

そもそも、ドキュメントの型と名前空間の宣言がめちゃくちゃです。やってみました？

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

html5 doctypeを設定していますが、 xhtml namespaceを参照しています。それはおそらくIEで問題を引き起こすでしょう...

私は通常、h5bp の最新の git ブランチ (html5 ボイラー プレート) のクローンを作成して、すべての html5 プロジェクトをセットアップすることをお勧めします。

于 2013-01-31T21:03:48.697 に答える
0

問題はプラグインにあると思います。XHTML 1.0 Transitional doctype を使用して、うまく機能する別のモザイク jquery プラグインを使用しました。

http://buildinternet.com/project/mosaic/1.0/

ご協力ありがとうございました

于 2013-02-01T15:53:12.827 に答える