当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Aligning Divs works in Firefox but not IE greater than 7

问题描述:

I am trying to migrate a web application to work with IE 11. When testing in IE 11, you'll see that the divs (each little green/blue box) don't line up properly. It looks perfectly fine in Firefox as you can see on jsfiddle here.

Thanks for any help resolving this! Here's the code since it's required with the jsfiddle link:

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;

}

网友答案:

Well, this is kinda weird, I added height: 6px to class .row and now it works in IE11+ (and FF DE44+, CH46+).

Did you try clearfix already? Should work with floats too.

分享给朋友:
您可能感兴趣的文章:
随机阅读: