Question

我正在使用960网格系统制作网站（www.960.gs）。

我有一个9列宽的div（grid_9），里面有两个div（grid_5和grid_4）。

这意味着产生一个大的外部div，其内部并排有两个内部div。

然而，当在IE6中查看时，它显示为一个较大的div，有两个内部div，一个在另一个之下。

在Firefox中，div正如他们所希望的那样彼此相邻，并且相同的设置在网站的其他部分也能正常工作。

发生了什么事？我无法解决这个问题。

这是html：

<div class="ContentWrapper grid_9 alpha omega">
        <div id="MainTitleWrapper" class="standardColor">
            <h2><span class="Rating"><%=Model.Rating%></span><%=Model.ScreenName%></h2>
        </div>
        <div class="MainContentWrapper standardColor">
            <div class="grid_5 alpha">
                    <h3>Ranked This Week In:</h3>
                    <div class="TagContentList">
                        <ul> some stuff</ul>
                    </div>
            </div>
            <div class="grid_4 omega">
                    <h3>Latest</h3>
                    <div class="tweet">
                    </div>
            </div>
        </div>
    </div>

Answer 1

我无法看到更多正在发生的事情，我猜你的内部div的内容正在推动他们的宽度大于他们的容器。如果内容推动该宽度，则IE6不尊重容器的宽度指定。

但是，如果可以，请发布更多代码或链接！

Answer 2

该行：

“并且相同的设置在其他设置中正常工作网站的一部分。“

会让我看看grid_4和grid_5 div中内容的填充，边距和宽度，我记得在IE6中盒子模型非常不稳定。

此外，IE6（以及可能更晚）的问题在于 italic 内容总是比您预期的要宽，并且可能导致外部div（grid_4或grid_5）比您预期的更宽。

Answer 3

可能就像IE6的双重填充倾向一样简单。如果您敢于向960网格系统展示黑客攻击，请尝试以下方法：

padding: 10px; /* whatever the padding is supposed to be for normal browsers */
_padding: 5px; /* half of that for IE6 */

IE6将呈现_padding规则 - 其他浏览器不会。这适用于任何规则：普通样式规则，第一; IE6 _rule，之后。

为什么我的浮动左div使用960.gs进入IE6的下一行？

3 个答案: