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

时间:2012-01-18 10:24:33

标签: html css internet-explorer

<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不会。

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

<强> 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; }

答案 2 :(得分:0)

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