html – CSS Floats – IE6中的内容下降

html – CSS Floats – IE6中的内容下降,第1张

概述我有一个布局,左边是菜单DIV.它以固定的EM宽度向左浮动.然后我有一个内容DIV,其左边距大于菜单的宽度.所以它恰好位于菜单的右侧,填充了剩余的空间,菜单和内容完美排列. 但是,在Internet Explorer 6中,如果内容过宽,则会落在菜单下方.这意味着你有大量的空白,如果没有滚动,实际上根本看不到任何内容. 遗憾的是,我无法对内容进行更改 – 这是对托管第三方内容的网站的重新设计,并且 我有一个布局,左边是菜单div.它以固定的EM宽度向左浮动.然后我有一个内容div,其左边距大于菜单的宽度.所以它恰好位于菜单的右侧,填充了剩余的空间,菜单和内容完美排列.

但是,在Internet Explorer 6中,如果内容过宽,则会落在菜单下方.这意味着你有大量的空白,如果没有滚动,实际上根本看不到任何内容.

遗憾的是,我无法对内容进行更改 – 这是对托管第三方内容的网站的重新设计,并且更改该内容超出了我的工作范围.

此外,还有一个页脚栏,必须位于菜单和内容的下方.

我设法通过使用绝对定位为ie6提供不同的布局来实现它的工作 – 不幸的是,页脚看起来很垃圾,而且ie6是我们网站上使用次数最多的浏览器,我真的不能用它.

我也试过搞乱溢出但最终导致出现在整个地方的随机滚动条的问题也没有任何好处.

有没有人知道是否有一个简单的非Javascript方式,这将在ie6以及“适当的”浏览器中工作?我目前认为它必须是基于表格的布局.

这是一个问题的例子:

<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/HTML4/loose.dtd"><HTML>    <head>        <style type="text/CSS">            .menu {                wIDth: 14em;                float: left;            }            .content {                margin-left: 15em;                zoom: 1;            }            .footer {                clear: both;            }             /* styling to make the demo more obvIoUs */            .menu {                background-color: #f99;            }            .content {                background-color: #9f9;            }            .footer {                background-color: #99f;            }            td {                border: 1px solID #000;            }        </style>    </head>    <body>    <div >        <div >            <ul>                <li><a href="#">menu item</a></li>                <li><a href="#">menu item</a></li>                <li><a href="#">menu item</a></li>                <li><a href="#">menu item</a></li>            </ul>        </div>        <div >            <h1>Main Content</h1>                <table>                    <tr>                        <td>this is a really</td>                        <td>wIDe table which</td>                        <td>I am using to push</td>                        <td>the content down</td>                        <td>need to keep going</td>                        <td>so that it breaks</td>                        <td>in ie6</td>                        <td>but naturally</td>                        <td>nothing else</td>                        <td>sghskdhksdhfsdhffs</td>                        <td>sghskdhksdhfsdhffs</td>                        <td>sghskdhksdhfsdhffs</td>                        <td>sghskdhksdhfsdhffs</td>                    </tr>                </table>            </div>        </div>        <div >            <p>copyright blah blah blah</p>        </div>    </body></HTML>
解决方法 如你所说,你已经尝试过绝对的位置.但我会尝试以下内容,它可能对你有用.这是CSS:

.container {    position:relative;}.menu {    wIDth: 14em;    position:absolute;    top: 0;    left: 0 !important;    left: -15em;}.content {    margin-left: 15em;}.footer {}

一些解释:菜单位于绝对位置,与其他内容无关.但是,IE将菜单相对于“content”div放置,并将其隐藏在“content”div之后.解决方法是将其置于负面位置,就像内容div具有“margin-left”一样,左边的em也是如此.但这应该仅针对IE进行,因此添加“左0!重要”(但在左侧之前),这是因为IE忽略“!important”而其他浏览器确认它并将使用“left 0” .

更新:

正如Alohci指出的更好的方法是使用“* HTML”黑客,在这种情况下,“菜单”的CSS变为:

.menu {    wIDth: 14em;    position:absolute;    top: 0;    left: 0;}* HTML .menu {     left: -15em;}
总结

以上是内存溢出为你收集整理的html – CSS Floats – IE6中的内容下降全部内容,希望文章能够帮你解决html – CSS Floats – IE6中的内容下降所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1069119.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存