Question

这将是主要标记：

<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： enter image description here

想要（就像在Firefox中一样）： enter image description here

Answer 1

实际上，IE8中存在一个错误，其中右浮动元素似乎清晰：左。

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>

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

Answer 3

这个jsfiddle是否修复它：http://jsfiddle.net/hgrHq/

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

稍微减少.lacarta的宽度。

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

http://cssgrid.net/

http://semantic.gs/

然后你不会排除这样的问题...它会响应所有屏幕尺寸。

Answer 4

Prob究竟是什么......？我只是测试了链接，发现那些菜单没有对齐..这里的解决方案是.menu li{ float:left} ..如果可能的话，更多的jus放一个屏幕截图：）

Div在IE8中不会漂浮

4 个答案: