gpt4 book ai didi

html - CSS Floats - 内容在 IE6 中掉落

转载 作者:技术小花猫 更新时间:2023-10-29 12:04:30 27 4
gpt4 key购买 nike

我有一个布局,左侧有一个菜单 DIV。它以固定的 EM 宽度向左浮动。然后我有一个内容 DIV,它的左边距大于菜单的宽度。所以它恰好位于菜单的右侧,并用菜单和内容完美排列的方式填充剩余空间。

但是,在 Internet Explorer 6 中,如果内容变得太宽,它会落在菜单下方。这意味着您有大量空白,如果不滚动,实际上根本看不到任何内容。

很遗憾,我无法更改内容 - 这是对托管第 3 方内容的网站的重新设计,更改该内容超出了我的能力范围。

此外,菜单和内容下方必须有一个页脚栏。

我设法通过使用绝对定位为 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 class="container">
<div class="menu">
<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 class="content">
<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 class="footer">
<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 完成,因此添加了“left 0 !important”(但在负左之前),这是有效的,因为 IE 忽略“!important”,而其他浏览器确实承认它并将使用“left 0” .

更新:

正如 Alohci 所说,更好的方法是使用“* html”hack,在这种情况下,“菜单”的 CSS 变为:

.menu {
width: 14em;
position:absolute;
top: 0;
left: 0;
}

* html .menu {
left: -15em;
}

关于html - CSS Floats - 内容在 IE6 中掉落,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/760211/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com