0

我剛剛開始,所以我不知道爲什麼這不起作用,但我正在嘗試使用jQuery砌體。這似乎工作在FF但不是IE9?jquery砌體不工作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; } 
    }); 
}); 

正如我說我剛學這個,不知道是什麼我失蹤。我發現這個概念here

讚賞。

編輯:對不起,錯字。這似乎並沒有在IE9中的工作,但我已經讀過它的假設,並提供演示網站,我可以讓它在IE9中工作。如果我查看他的源代碼,有一個額外的ie.js正在進行,我想知道是否還有其他東西,我不知道要在IE9中使用石工。我想,因爲這是一個jQuery插件它已經不應該?試圖理解這一點。

應該澄清,道歉:通過不工作我的意思是假設divs居中,甚至寬度在任何一方,然後迴應。當我在IE中打開時,無論屏幕大小如何,所有div都在左側水平。

+0

有什麼問題? – Chanckjh

+0

'$('#list').masonry('您正在選擇'id',但沒有#list id? – Chanckjh

+0

是的。 – Justin

回答

0

這是非常糟糕的(令人尷尬的),但我只是輸入文檔類型....是無效的。正如我所說我是初學者。