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

这是非常糟糕的(令人尴尬的),但我只是输入文档类型....是无效的。正如我所说我是初学者。