问题:
我目前正在使用 div 和 css 创建网页布局，而不是 HTML 表格布局。当然，我希望它能够在所有主要浏览器上运行。
我有一个横幅 Pane ，它的左侧部分有一个 float 菜单。问题是，如果横幅对于所提供的空间而言太宽，它会跳转到菜单下方的空间(它更宽的地方)并带走所有页面内容。
尝试的解决方案:
显而易见的解决方案是在我的 CSS 中使用“溢出:隐藏”属性。问题是这在 IE 中不起作用。我读到这是因为我将它相对定位(这是真的)，但在这种情况下我看不到使用相对定位的任何方法。我必须保留它。
我还读到您可以将 Pane 的宽度设置为默认值以外的值，然后“溢出:隐藏”属性将生效。这确实解决了 IE 中的问题(将宽度设置为 100%)，但在 chrome(可能还有其他浏览器)中产生了一个问题，即为横幅分配的空间对于页面来说太宽了，然后 chrome 的行为方式相同IE 原本 - 将横幅推到页面底部。此解决方法可行，但我需要将宽度值定义为“100% - menuWidth”，因为左侧有一个菜单。我试过这个:
style="width:expression(document.compatMode=='CSS1Compat'? document.documentElement.clientWidth-(此处为菜单宽度)+'px' : body.clientWidth-(此处也有)+' px');"
但是使用表达式似乎不会启用“溢出”属性，即使直接设置一个简单值的宽度也是如此。
编辑:应要求附上我的代码。
HTML:
<div id="ControlPanel" runat="server" class="contentpane" align="center"></div>
<div id="Link" runat="server" align="right" onclick="location.href='address.html';"></div>
<div id="Header" runat="server" class="header" align="right"></div>
<div id="Links" runat="server" class="header" align="center">LINKS</div>
<div id="Search" runat="server" class="skingradient" align="right">[SEARCH]</div>
<div id="LeftPane" runat="server" class="leftpane" align="left">[USER]</br>LEFT</div>
<div id="TopPane" runat="server" class="toppane" align="left"><img src="image.jpg" alt="" /></div>
<div id="RightPane" runat="server" class="rightpane" align="center">RIGHT</div>
<div id="ContentPane" runat="server" class="contentpane" align="center">CONTENT</div>
<div></div>
<div id="BottomPane" runat="server" class="bottompane" align="center">BOTTOM</div>
<div id="Footer" runat="server" class="skingradient" align="center">[COPYRIGHT]</div>
</body>
</html>
CSS:
#Search
{
position: relative;
top: -20;
background-color: transparent;
z-index: 1;
}
#Header
{
height: 77px;
background-color: #0860A8;
background-image: url(ImagePath.gif);
background-position: right;
background-repeat: no-repeat;
border-bottom: 1 solid white;
}
#Links
{
background-color: #E6E6E6;
}
#TopPane
{
border-top: 1 solid #0860A8;
position: relative;
top: -20;
overflow: hidden;
}
#LeftPane
{
float: left;
position: relative;
top: -20;
width: 200px;
height: 100%;
background-color: #E6E6E6;
border-right: 1 solid #0860A8;
}
#ContentPane
{
position: relative;
top: -20;
width: 100%;
height: 100%;
background-color: Green;
z-index: -1;
}
#RightPane
{
z-index: 0;
position: relative;
top: -20;
height: 100%;
float: right;
width: auto;
background-color: Red;
max-width: 40%;
width:expression(document.compatMode=='CSS1Compat'? document.documentElement.clientWidth*2/5+'px' : body.clientWidth*2/5+'px');
}
颜色编码是为了方便预览和编辑网站。
最佳答案
首先，确保您的文件以文档类型开头。它在使浏览器行为相似方面大有帮助。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
...
关于css - 如何使 "overflow: hidden"适用于所有浏览器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5425282/