0

私は始めたばかりなので、これが機能しない理由はわかりませんが、jquery masonry を使用しようとしています。これはFFでは機能するようですが、IE9では機能しませんか?

マークアップ

<div id="content-wrapper">
    <div>Here Goes..</div>
    <div id="list">
        <div class="tile" style="height: 14em;"></div>
        <div class="tile" style="height: 26em;"></div>
        <div class="tile" style="height: 8em;"></div>
        <div class="tile" style="height: 14em;"></div>
        <div class="tile" style="height: 8em;"></div>
        <div class="tile" style="height: 18em;"></div>
        <div class="tile" style="height: 16em;"></div>
        <div class="tile" style="height: 12em;"></div>
    </div>
</div>

CSS:

body
        {
            background-color: #545e5d;
            padding: 3.75em 1.875em;
        }
        strong
        {
            font-weight: 700;
        }
        h1
        {
            font-size: 1.625em;
            font-style: italic;
            letter-spacing: -0.1em;
            text-align: center;
            margin-bottom: 1.875em; 
        }
            h1,
            h1 a
            {
                color: #fff;
                color: rgba( 255, 255, 255, .5 );
            }
                h1 a:hover
                {
                    color: #fff;
                }

        #wrapper
        {
            max-width: 60em;
            margin: 0 auto;
        }
            #list
            {
                width: 103.125%; 
                overflow: hidden;
                margin-left: -1.562%;
                margin-bottom: -1.875em; 
            }
                .tile
                {
                    width: 30.303%; 
                    background-color: #fff;
                    background-color: rgba( 255, 255, 255, .5 );
                    float: left;
                    margin: 0 1.515% 1.875em; 
                    background-color:#353535;
                }

        @media only screen and ( max-width: 40em ) 
        {
            .tile
            {
                width: 46.876%; 
                margin-bottom: 0.938em; 
            }
        }

        @media only screen and ( max-width: 20em ) 
        {
            #list
            {
                width: 100%;
                margin-left: 0;
            }
                .tile
                {
                    width: 100%;
                    margin-left: 0;
                    margin-right: 0;
                }
        }

js:

$( window ).load( function()
    {
    var columns    = 3,
        setColumns = function() { columns = $( window ).width() > 640 ? 3 : $( window ).width() > 320 ? 2 : 1; };

    setColumns();
    $( window ).resize( setColumns );

    $( '#list' ).masonry(
    {
        itemSelector: '.item',
        columnWidth:  function( containerWidth ) { return containerWidth / columns; }
    });
});

私が言ったように、私はこれを学んでいて、何が欠けているのか疑問に思っています。このコンセプトはこちらで見つけました。

感謝。

編集：申し訳ありませんがタイプミス。これは IE9 では動作しないようですが、動作すると思われることを読みました。提供されたデモ サイトでは、IE9 で動作させることができます。彼のソースを見ると、追加の ie.js が進行中であり、石工を IE9 で動作させるために私が認識していない追加の何かがあるかどうか疑問に思っています。それはjqueryプラグインなので、すでにいいえではありませんか？これを理解しようとしているだけです。

お詫びを明確にする必要があります。動作しないということは、divが中央に配置され、両側の幅が均一であると想定されていることを意味します。IE で開くと、画面サイズに関係なく、すべての div が左側に水平に表示されます。

4

1 に答える 1

0

これはかなり悪い (恥ずかしい) ことですが、単に doctype をタイプミスしただけで、有効ではありませんでした。私が言ったように、私は初心者です。

于 2013-01-06T18:11:30.370 に答える