我正在尝试迁移Web应用程序以使用IE 11.在IE 11中进行测试时,您会看到div(每个小绿/蓝框)没有正确排列。在jsfiddle here中可以看到它在Firefox中看起来非常好。
感谢您解决此问题的任何帮助!这是代码,因为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;
}
答案 0 :(得分:1)
嗯,这有点奇怪,我将height: 6px
添加到课程.row
,现在它适用于IE11 +(以及FF DE44 +,CH46 +)。
你有没有尝试过clearfix?也应该使用花车。