Aligning Divs在Firefox中工作，但不是IE大於7

我試圖遷移一個web應用程序以使用IE 11。在IE 11中測試時，您會看到div（每個綠色/藍色小框）都不會排隊正確。它在Firefox中看起來非常好，你可以在jsfiddle here上看到。Aligning Divs在Firefox中工作，但不是IE大於7

感謝您解決此問題的任何幫助！這裏是因爲它需要用的jsfiddle鏈接代碼：

HTML

<h1>Matrix Test Page</h1> 
    <div id="rack-0-bartok" title="rack-0"> 
    <div class="row"> 
     <div class="node node-faded" id="matrix-box-b017-bartok" style="background: #00DC00;" title="b017"></div> 
     <div class="node node-faded" id="matrix-box-b018-bartok" style="background: #00DC00;" title="b018"></div> 
     <div class="node node-faded" id="matrix-box-b019-bartok" style="background: #00DC00;" title="b019"></div> 
     <div class="node node-faded" id="matrix-box-b020-bartok" style="background: #00DC00;" title="b020"></div> 
     <div class="node node-faded" id="matrix-box-b021-bartok" style="background: #00DC00;" title="b021"></div> 
     <div class="node node-faded" id="matrix-box-b022-bartok" style="background: #00DC00;" title="b022"></div> 
     <div class="node node-faded" id="matrix-box-b023-bartok" style="background: #0000CD;" title="b023"></div> 
     <div class="node node-faded" id="matrix-box-b024-bartok" style="background: #0000CD;" title="b024"></div> 
    </div> 
    <div class="row"> 
     <div class="node node-faded" id="matrix-box-b025-bartok" style="background: #0000CD;" title="b025"></div> 
     <div class="node node-faded" id="matrix-box-b026-bartok" style="background: #0000CD;" title="b026"></div> 
     <div class="node node-faded" id="matrix-box-b027-bartok" style="background: #0000CD;" title="b027"></div> 
     <div class="node node-faded" id="matrix-box-b028-bartok" style="background: #00DC00;" title="b028"></div> 
     <div class="node node-faded" id="matrix-box-b029-bartok" style="background: #00DC00;" title="b029"></div> 
     <div class="node node-faded" id="matrix-box-b030-bartok" style="background: #00DC00;" title="b030"></div> 
     <div class="node node-faded" id="matrix-box-b031-bartok" style="background: #0000CD;" title="b031"></div> 
     <div class="node node-faded" id="matrix-box-b032-bartok" style="background: #0000CD;" title="b032"></div> 
    </div> 
    <div class="row"> 
     <div class="node node-faded" id="matrix-box-b001-bartok" style="background: #00DC00;" title="b001"></div> 
     <div class="node node-faded" id="matrix-box-b002-bartok" style="background: #00DC00;" title="b002"></div> 
     <div class="node node-faded" id="matrix-box-b003-bartok" style="background: #00DC00;" title="b003"></div> 
     <div class="node node-faded" id="matrix-box-b004-bartok" style="background: #0000CD;" title="b004"></div> 
     <div class="node node-faded" id="matrix-box-b005-bartok" style="background: #0000CD;" title="b005"></div> 
     <div class="node node-faded" id="matrix-box-b006-bartok" style="background: #00DC00;" title="b006"></div> 
     <div class="node node-faded" id="matrix-box-b007-bartok" style="background: #0000CD;" title="b007"></div> 
     <div class="node node-faded" id="matrix-box-b008-bartok" style="background: #0000CD;" title="b008"></div> 
    </div> 
    <div class="row"> 
     <div class="node node-faded" id="matrix-box-b009-bartok" style="background: #00DC00;" title="b009"></div> 
     <div class="node node-faded" id="matrix-box-b010-bartok" style="background: #00DC00;" title="b010"></div> 
     <div class="node node-faded" id="matrix-box-b011-bartok" style="background: #00DC00;" title="b011"></div> 
     <div class="node node-faded" id="matrix-box-b012-bartok" style="background: #00DC00;" title="b012"></div> 
     <div class="node node-faded" id="matrix-box-b013-bartok" style="background: #0000CD;" title="b013"></div> 
     <div class="node node-faded" id="matrix-box-b014-bartok" style="background: #0000CD;" title="b014"></div> 
     <div class="node node-faded" id="matrix-box-b015-bartok" style="background: #00DC00;" title="b015"></div> 
     <div class="node node-faded" id="matrix-box-b016-bartok" style="background: #00DC00;" title="b016"></div> 
    </div> 
    </div> 
    <div id="rack-1-bartok" title="rack-1"> 
    <div class="row"> 
     <div class="node node-faded" id="matrix-box-b049-bartok" style="background: #00DC00;" title="b049"></div> 
     <div class="node node-faded" id="matrix-box-b050-bartok" style="background: #00DC00;" title="b050"></div> 
     <div class="node node-faded" id="matrix-box-b051-bartok" style="background: #00DC00;" title="b051"></div> 
     <div class="node node-faded" id="matrix-box-b052-bartok" style="background: #00DC00;" title="b052"></div> 
     <div class="node node-faded" id="matrix-box-b053-bartok" style="background: #00DC00;" title="b053"></div> 
     <div class="node node-faded" id="matrix-box-b054-bartok" style="background: #00DC00;" title="b054"></div> 
     <div class="node node-faded" id="matrix-box-b055-bartok" style="background: #00DC00;" title="b055"></div> 
     <div class="node node-faded" id="matrix-box-b056-bartok" style="background: #00DC00;" title="b056"></div> 
    </div> 
    <div class="row"> 
     <div class="node node-faded" id="matrix-box-b057-bartok" style="background: #00DC00;" title="b057"></div> 
     <div class="node node-faded" id="matrix-box-b058-bartok" style="background: #0000CD;" title="b058"></div> 
     <div class="node node-faded" id="matrix-box-b059-bartok" style="background: #0000CD;" title="b059"></div> 
     <div class="node node-faded" id="matrix-box-b060-bartok" style="background: #0000CD;" title="b060"></div> 
     <div class="node node-faded" id="matrix-box-b061-bartok" style="background: #00DC00;" title="b061"></div> 
     <div class="node node-faded" id="matrix-box-b062-bartok" style="background: #0000CD;" title="b062"></div> 
     <div class="node node-faded" id="matrix-box-b063-bartok" style="background: #0000CD;" title="b063"></div> 
     <div class="node node-faded" id="matrix-box-b064-bartok" style="background: #0000CD;" title="b064"></div> 
    </div> 
    <div class="row"> 
     <div class="node node-faded" id="matrix-box-b033-bartok" style="background: #0000CD;" title="b033"></div> 
     <div class="node node-faded" id="matrix-box-b034-bartok" style="background: #0000CD;" title="b034"></div> 
     <div class="node node-faded" id="matrix-box-b035-bartok" style="background: #0000CD;" title="b035"></div> 
     <div class="node node-faded" id="matrix-box-b036-bartok" style="background: #0000CD;" title="b036"></div> 
     <div class="node node-faded" id="matrix-box-b037-bartok" style="background: #0000CD;" title="b037"></div> 
     <div class="node node-faded" id="matrix-box-b038-bartok" style="background: #00DC00;" title="b038"></div> 
     <div class="node node-faded" id="matrix-box-b039-bartok" style="background: #00DC00;" title="b039"></div> 
     <div class="node node-faded" id="matrix-box-b040-bartok" style="background: #0000CD;" title="b040"></div> 
    </div> 
    <div class="row"> 
     <div class="node node-faded" id="matrix-box-b041-bartok" style="background: #00DC00;" title="b041"></div> 
     <div class="node node-faded" id="matrix-box-b042-bartok" style="background: #00DC00;" title="b042"></div> 
     <div class="node node-faded" id="matrix-box-b043-bartok" style="background: #0000CD;" title="b043"></div> 
     <div class="node node-faded" id="matrix-box-b044-bartok" style="background: #00DC00;" title="b044"></div> 
     <div class="node node-faded" id="matrix-box-b045-bartok" style="background: #0000CD;" title="b045"></div> 
     <div class="node node-faded" id="matrix-box-b046-bartok" style="background: #0000CD;" title="b046"></div> 
     <div class="node node-faded" id="matrix-box-b047-bartok" style="background: #0000CD;" title="b047"></div> 
     <div class="node node-faded" id="matrix-box-b048-bartok" style="background: #00DC00;" title="b048"></div> 
    </div> 
    </div>

CSS

.row { 
    background: #cccccf; 
    margin: 0 !important; 
} 

div[id*='rack-'] { 
    float: left; 
    padding: 2px !important; 
} 

.node { 
    width: 4px; 
    height: 4px; 
    float: left; 
    border: 1px solid #B0B0B0; 
    background: #cccccf; 
    margin: 0 !important; 
    cursor: pointer; 
    filter: alpha(opacity=100); 
    opacity: 1; 
} 

.faded .node-faded { 
    width: 4px; 
    height: 4px; 
    filter: alpha(opacity=50); 
    opacity: .5; 
}

來源

2015-11-19 Alex Ramos

你可以發佈你的IE瀏覽器結果截圖嗎？在IE和firefox上我唯一能看到的區別是IE在一行中顯示所有的框，而firefox在每行中顯示框，這可以通過在'''中加入'''clear：both'來解決。行'''類小提琴http://jsfiddle.net/x9wxcym4/4/ – silver

這正是差異。我不是前端人員，所以我不清楚。謝謝！ –

嗯，這是有點怪異，我加height: 6px到.row類和現在它適用於IE11 +（和FF DE44 +，CH46 +）。

您是否嘗試過使用clearfix？也應該使用漂浮物。

來源

2015-11-19 04:10:49

非常感謝，明確的解決辦法。 –

Aligning Divs在Firefox中工作，但不是IE大於7

回答

相關問題