Div不会在IE8中浮动 [英] Divs wont float in IE8

问题描述

这将是主要的标记：

 < div class =mancha> 
< div class =logo>< / div> 
< div id =content-areaclass =espacio> 
< div class =eltitular> HEADER< / div> 
< div class =lacarta> LEFT CONTENT< / div> 
< div id =sidebar> RIGHT CONTENT< / div> 
< / div> 
< / div> 
  

其中（虽然有更多的规则可以看到在链接这是宽度） / p>

  .espacio {
 margin-left：192px; 
 background：transparent; 
 width：808px！important 
} 
 .lacarta {
 width：595px; 
 float：left; 
} 
 #sidebar {
 width：210px; 
 float：right 
} 
  

问题是.lacarta和#sidebar

这里可以测试：

如果您不想为HTML添加任何内容，您可以稍微重新构建一个快速修复。将右侧浮动的边栏置于第一个，即：

 < div id =content-areaclass =espacio> 
< div class =eltitular> HEADER< / div> 
< div id =sidebar> RIGHT CONTENT< / div> 
< div class =lacarta> LEFT CONTENT< / div> 
< / div> 
  

This would be the main markup:

<div class="mancha">
    <div class="logo"></div>    
    <div id="content-area" class="espacio">
             <div class="eltitular">HEADER</div>
             <div class="lacarta">LEFT CONTENT</div>
             <div id="sidebar">RIGHT CONTENT</div>
        </div>
</div>

Where (allthough there are many more rules wich can be seen in the link this are the widths)

.espacio{
    margin-left: 192px;
    background: transparent;
        width:808px !important
}
.lacarta{
        width:595px;
        float:left;
}
#sidebar{
        width:210px;
        float:right
} 

The problem is that .lacarta and #sidebar are not floating one next to other (this only happens in IE8 or lower)

It can be tested here: http://goo.gl/ksFQI (if you compare to firefox/chrome you will se that the sidebar is not in the right side of the container..)

I checked with the IE8 developer tools that the container seems to be big enough for both elements..

Any idea what I missed?

-EDIT-

Current IE:

Wanted (like in Firefox):

解决方案

Actually, there is a bug in IE8 where right-floated elements seem to clear:left.

http://blogs.msdn.com/b/askie/archive/2009/03/23/right-floated-element-in-internet-explorer-8-is-positioned-differently-than-internet-explorer-7.aspx

If you don't want to add anything to your HTML at all, you can slightly restructure it for a quick fix. Put the right-floated sidebar first, ie:

<div id="content-area" class="espacio">
  <div class="eltitular">HEADER</div>
  <div id="sidebar">RIGHT CONTENT</div>
  <div class="lacarta">LEFT CONTENT</div>
</div>

这篇关于Div不会在IE8中浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！