Question

<div class="sectiuni_home_box" style="width: 626px; padding-left: 0px;">
    <div class="sectiuni_home_box_t" style="border-left: 0; width: 618px;">
        <div class="sectiuni_home_box_v" style=" width: 616px;">
            <div align="left" style="width: 1px; border: 0; border-left: 1px solid #c3c3c3; float:left; height: 100%; padding: 0; vertical-align: middle;"></div>
            <div id="actiuni" name="actiuni">
                <table style="border: 0;"></table>
                <div id="lista_actiuni" name="lista_actiuni">
                    <div id="actiuni_scroll" class="scroll" style="width: 100%; height: 428px; overflow-x: auto; overflow-y: scroll;">
                    </div>
                </div>
            </div> 
       </div>
   </div>

这是我正在谈论的布局。唯一有浮动的div被认为是#actiuni和#lista_actiuni的左边。看起来与Firefox中的完全相同，但IE将#lista_actiuni置于其他所有内容之下。它将float div放在左边，右边的表从顶部开始，但是当它放置#lista_actiuni的时候它会一直下降到floaty div结束的地方。为了使情况变得更糟，它有时会纠正自己，并且很好地放置一切，只有在我切换页面或刷新时再次被打破。

关于可能导致什么的任何想法？

我使用页面中的代码整理了一个demonstration。我能得到的最贴心的东西。问题是，在示例中，它在ie和Firefox中看起来都是错误的，但在实际的网站上它可以正常工作。

编辑：编辑了jsfiddle，取而代之的是一个在Firefox中正常运行但在IE中失败的版本。

更新：似乎删除了#actiuni_scroll div和其中的表格，只留下我已设法使其正常显示的裸数据，所以我的猜测就是问题出在哪里

更新2：我通过从#actiuni_scroll div中删除width属性来解决问题。似乎firefox知道如何计算100％宽度以包含浮动到其左侧的元素，但IE不会。

Answer 1

完全脱离我的头顶（没有任何视觉效果）我想你可以尝试将overflow:hidden添加到.sectiuni_home_box_v div。

Answer 2

需要清除浮动，看起来你不是这样做的。

<强> HTML

<div class="sectiuni_home_box_v">

<!-- IE6 has problems with more than 1 css rule & IE7 does not recognise psudeo's SO -->
<br class=clearfix />

</div>

<强> CSS

.clearfix{
     clear:both;
     visibility: hidden;
     height:0;
     *zoom:1;
    }

注意：IE7会对某些元素应用双边距，在某些情况下也是如此双填充，您可以使用css规则快速修复{ *显示：内联; *缩放：1; }

Answer 3

我通过从#actiuni_scroll div中删除width属性来解决问题。似乎firefox知道如何计算100％宽度以包含浮动到其左侧的元素，但IE不会。

如何更改此div布局，以便浮动在IE中工作？

3 个答案: