为什么我的浮动左 div 在 IE6 中使用 960.gs 转到下一行?

发布于 2024-07-29 00:45:27 字数 1179 浏览 5 评论 0原文

我正在使用 960 网格系统制作一个网站(www.960.gs)。

我有一个 9 列宽的 div (grid_9),里面有两个 div (grid_5 和 grid_4)。

这意味着产生一个大的外部 div,其中并排坐着 2 个内部 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>

I'm using the 960 grid system to make a site (www.960.gs).

I have a 9 column wide div (grid_9) with two divs inside it (grid_5 and grid_4).

This is meant to yield one large outer div with 2 internal divs sitting side by side inside of it.

However when viewed in IE6 it displays as one larger div with two internal divs, one below the other.

In Firefox the divs sit next to each other, as they are meant to, and the same setup works fine in other parts of the site.

What is going on? I can't work it out.

Here is the 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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

我最亲爱的 2024-08-05 00:45:27

由于无法看到更多发生的情况,我猜测您的内部 div 的内容正在将它们的宽度推得比容器更大。 如果内容根本推动容器的宽度,则 IE6 不会尊重容器的宽度指定。

但如果可以的话,请发布更多代码或链接!

Without being able to see more of what's going on, I'd guess the content of your internal divs is pushing their width to be larger than their container. IE6 doesn't respect a container's width designation if the content pushes that width at all.

But do post more code or a link if you can!

谁的年少不轻狂 2024-08-05 00:45:27

该行:

“相同的设置在其他设备上运行良好
网站的一部分。”

会引导我查看 grid_4 和 grid_5 div 中内容的内边距、边距和宽度,据我所知,框模型在 IE6 中非常不稳定。IE6

也是如此(可能稍后)有一个问题,即斜体内容总是比您预期的更宽,并且可能导致外部 div(grid_4 或 grid_5)比您预期的更宽。

The line:

"and the same setup works fine in other
parts of the site."

Would lead me to look at the padding, margins and width of the content within the grid_4 and grid_5 divs, from what I remember the box model is pretty flaky in IE6.

Also IE6 (and possibly later) has a problem in that italic content is always wider than you expect and could lead to the outer div (grid_4 or grid_5) being wider than you expect.

亣腦蒛氧 2024-08-05 00:45:27

可能是像 IE6 的双键盘倾向一样简单。 如果你敢用 hack 呈现 960 网格系统,试试这个:

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

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

Could be something as simple as IE6's propensity to double-pad. If you dare present the 960 grid system with a hack, try this:

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

IE6 will render the _padding rule - other browsers will not. This works for any rule: normal style rule, first; IE6 _rule, after.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文