IE 8 错误定位 960 网格答案

【问题标题】：IE 8 Incorrectly Positioning 960 GridIE 8 错误定位 960 网格
【发布时间】：2011-03-24 22:11:49
【问题描述】：

我有以下 html 和类结构。它在 Firefox 中按预期显示，但在 IE 8 中，rt-col 被推送到下一行。关于可能出错的任何想法？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
...
...
<div id="main" class="container_12">
  <div id="lt-col" class="grid_8">
  ...
  </div>
  <div id="rt-col" class="grid_4">
  ...
  </div>
</div>

与容器和网格相关的 CSS 如下：

#main:after, #lt-col:after, #rt-col:after { 
   content: "."; 
   height: 0; 
   visibility: hidden; 
   display: block; 
   clear: both; 
} 

#main { 
   width: 960px; 
   margin-left: auto; 
   margin-right: auto; 
   margin-top: 10px;
}

【问题讨论】：

你有文档类型集吗？如果没有它，在 IE 中呈现默认为 Quirks 模式，并且往往会严重破坏呈现。
如果您使用的是 960 以外的任何东西，您能否也发布一些 css。
@scunliffe：是的，我已经设置了文档类型；请参阅上面的编辑。 @Matijs：我编辑了我的原始帖子以包含与容器和网格有关的 css。我排除的其他 css 因为它与排版、背景等有关......
使用网格 css 测试给定代码也不会重现 IE8 中描述的错误，（两列很好地并排放置）所以我认为您的其他 CSS 中肯定还有其他内容冲突，有什么方法可以在 JSBin 或其他东西中重现最小和整个代码？

标签： html css internet-explorer-8 960.gs

【解决方案1】：

假设您正在尝试构建一个左右列网格：

您需要为每列定义一个明确的宽度。目前，你没有。而且由于您使用的是“clear：both;”两列上的属性和值，它们将简单地显示为行。

将此添加到您的 CSS（或一些宽度变化）中，您的行将变为列：

    #lt-col {
            float: left;
            width: 50%;
    }
    #rt-col {
            float: right;
            width: 50%;
    }

【讨论】：

你说得对，我正在尝试构建一个左右列。虽然我确实了解您的解决方案，但我不清楚为什么需要设置宽度； grid_* 不设置宽度吗？另外，clear:both 不是清除 inside div 而不是 div 本身吗？
您没有包含“grid_8”和“grid_4”类的 CSS，所以我无法查看它们是否设置了宽度。而且您可能误解了“clear”属性及其值的用途：将“clear”属性应用于元素时，您禁止其他元素在其左侧或右侧浮动。

【解决方案2】：

@clairesuzy 我认为问题在于应用的样式。有一些样式会在主 div 或 rt-col 和 lt-col div 中添加填充

这可以很容易地通过使用下面的代码来排序

<div class="container_12">
  <div class="grid_8">
  ...
  </div>
  <div class="grid_4">
  ...
  </div>

  <div class="clear"></div>
</div>

无论任何样式如何，上述内容都可以开箱即用...

然后执行此操作并确保没有填充

<div id="main">

    <div class="container_12">

        <div class="grid_8">
            <div id="lt-col">...</div>
        </div>
        <div class="grid_4">
            <div id="rt-col">...</div>
        </div>

    <div class="clear"></div>   
    </div>
</div>

你想做的简化版

【讨论】：

如果问题仍然存在，请发布此代码所在位置的链接，我一定会进一步帮助您 - 干杯！