Divs不会在IE8中浮动答案

【问题标题】：Divs wont float in IE8Divs不会在IE8中浮动
【发布时间】：2013-04-04 22:02:31
【问题描述】：

这将是主要标记：

<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>

在哪里（尽管在链接中可以看到更多规则，但这是宽度）

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

问题在于 .lacarta 和 #sidebar 不是一个接一个地浮动（这只发生在 IE8 或更低版本中）

可以在这里进行测试：http://goo.gl/ksFQI（如果您与 firefox/chrome 进行比较，您会发现侧边栏不在容器的右侧......）

我检查了 IE8 开发人员工具，容器似乎对于这两个元素都足够大了..

知道我错过了什么吗？

-编辑-

当前的 IE：

通缉（如在 Firefox 中）：

【问题讨论】：

标签： css internet-explorer-8 css-float

【解决方案1】：

实际上，IE8 中存在一个错误，右浮动元素似乎可以清除：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

如果您根本不想在 HTML 中添加任何内容，可以稍微重构它以快速修复。把右浮动的sidebar放在前面，即：

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

【讨论】：

【解决方案2】：

添加父容器：

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

【讨论】：

【解决方案3】：

这个 jsfiddle 修复了吗：http://jsfiddle.net/hgrHq/

.lacarta{
    width:590px;
    float:left;
}

只是稍微减小了 .lacarta 的宽度。

顺便说一句，您可能需要考虑使用响应式网格系统来像这样布置您的库。例如：

http://cssgrid.net/

http://semantic.gs/

那么你就不会遇到这样的排队问题......它会响应所有屏幕尺寸。

【讨论】：

【解决方案4】：

Prob 到底是什么...？？我刚刚测试了链接，发现那些菜单没有对齐..这里的解决方案是.menu li{ float:left} ..如果可能的话，请放一个屏幕截图:)

【讨论】：