CSS浮动 - 内容在IE6下降 [英] CSS Floats - content falling down in IE6
问题描述
我有一个布局，左侧有一个菜单DIV。这是悬浮的具有固定的EM宽度。然后我有一个内容DIV，其左边距大于菜单的宽度。
I have a layout with a menu DIV on the left. This is floated left with a fixed EM width. I then have a content DIV which has a left margin of more than the menu's width. So it sits nicely to the right of the menu and fills up the remaining space with both menu and content lined up perfectly.
但是，在Internet Explorer 6中，如果内容中的内容完全一致，变得太宽了，它落在菜单下面。这意味着你有空白的加载，并且实际上看不到任何内容，而不滚动。
However, in Internet Explorer 6, if the content gets too wide it falls down below the menu. which means you have loads of whitespace and can't actually see any of the content at all without scrolling.
很遗憾，我不能更改内容 - 这是对托管第三方内容的网站的重新设计，并且更改该内容超出了我可以做的范围。
Unfortunately I am not able to make changes to the content - this is a redesign of a site hosting 3rd party content, and changing that content is outside the scope of what I can do.
此外，还有一个页脚栏
我设法通过提供IE6使用绝对定位不同的布局几乎让它工作 - 不幸的是页脚看起来垃圾和IE6是我们网站上第二大使用的浏览器，我不能真正去这样。
I managed to almost get it to work by providing IE6 with a different layout using absolute positioning - unfortunately the footer looks rubbish and as IE6 is the 2nd most used browser on our site I can't really go with that.
我也试图搞乱溢出，但最终导致问题随机滚动条出现所有
I also tried messing around with overflows but ended up causing problems with random scrollbars appearing all over the place which wasn't any good either.
有没有人知道如果有一个简单的非Javascript的方式，这将工作在IE6以及适当浏览器？我现在认为它必须是一个基于表格的布局。
Does anyone know if there is a simple non-Javascript way of doing this that will work in IE6 as well as "proper" browsers? I'm currently thinking that it will have to be a table based layout.
这里有一个问题的例子：
Here's an example of the problem:
<!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：
As you mentioned you already tried position absolute. But I'll tried the following and it might work for you. Here is the CSS:
.container {
position:relative;
}
.menu {
width: 14em;
position:absolute;
top: 0;
left: 0 !important;
left: -15em;
}
.content {
margin-left: 15em;
}
.footer {
}
菜单位置是绝对的，独立于其他内容。但是，IE将菜单放在contentdiv上，并将其隐藏在contentdiv后面。这里的工作是负面定位，就像内容div有margin-left一样，左边有许多em。但是这应该只为IE做，所以为左0！重要被添加（但在负左）之前，这是工作，因为IE忽略！重要，而其他浏览器确认它，将使用左0 。
Some explanation: The menu is positioned absolute, independent of the other content. However, IE puts the menu relative to the "content" div, and hides it behind the "content" div. The work around is to position it negatively, just as many em's to the left as the content div has "margin-left". But this should only done for IE, so therefor the "left 0 !important" is added (but before the negative left), which works because IE ignores "!important" while the other browers do acknowledge it and will use "left 0".
更新：
As Alohci注意到一个更好的方法是使用* html在这种情况下，menu的CSS变成：
As Alohci notes a better way would be to use the "* html" hack, in that case the CSS for "menu" becomes:
.menu {
width: 14em;
position:absolute;
top: 0;
left: 0;
}
* html .menu {
left: -15em;
}
这篇关于CSS浮动 - 内容在IE6下降的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
