Question

我在包装器div中水平地有3个divs，如下所示：

<div id="wrapper">
    <div style="float: left;" class="sidebar"></div>
    <div style="float: right;" class="sidebar"></div>
    <div class="main"><img width="636" height="333" /></div>
</div>

#wrapper
    width: 940px;
    margin-left: auto;
    margin-right: auto;
    border-bottom: solid #668ccc 2px;
    background: #fff;
    position: relative;

 div.sidebar{
    border: solid 3px #999;
    width: 126px;
    height: 360px;
    padding: 5px 10px 5px;

 .main {
    width: 636px;
    font-size: 12px;
    text-align: center;
    color: #000;
    text-decoration: none;
    font-family: Verdana, Geneva, sans-serif;
    margin-left: auto;
    margin-right: auto;

所以这里发生了什么：我有两个侧栏和一个中心div用于页面主要内容，在这种情况下是一个宽度宽的图像作为中心div，它直到它两侧的两个侧边栏，所以：

sidebars: 304px wide,  center div: 636px wide,  Totaling 940px

在所有现代浏览器中，它显示完美，但在 IE6 中，中心div被推下来，好像两个侧边栏实际上更宽。

我尝试从实际的侧边栏中删除填充并将其应用到文本中但没有区别。也改为doctype 4.01 strict什么也没做（默认情况下我有doctype html / html5 ）。

这是实际页面：http://www.final7fantasy.com/index1.html
在netrender.com上为IE6：http://netrenderer.com/index.php

IE6盒子bug有3个divs布局

0 个答案: