Question

问题：

我目前正在使用div和css而不是HTML表格布局创建网页布局。当然，我希望能够在所有主流浏览器中运行。

我有一个横幅窗格，在其左侧有一个浮动菜单。问题是，如果横幅太宽而且没有提供的空间，它会跳转到菜单下方的空间（更宽的地方），并将所有页面内容都带入其中。

尝试解决方案：

显而易见的解决方案是在我的css中使用“overflow：hidden”属性。问题是这在IE中不起作用。我读到这是因为我把它放在相对位置（这是真的），但在这种情况下我没有看到任何方法使用相对定位。我必须保留它。

我还读到你可以将窗格的宽度设置为默认值以外的值，然后“overflow：hidden”属性将生效。这可以解决IE中的问题（将宽度设置为100％），但在chrome（以及可能还有其他浏览器）中会产生问题，其中横幅的分配空间对于页面来说太宽，然后chrome的行为方式相同IE最初 - 将横幅推到页面底部。这种解决方法可以工作，但我需要将宽度值定义为“100％ - menuWidth”，因为左侧有一个菜单。我试过这个：

style="width:expression(document.compatMode=='CSS1Compat'? document.documentElement.clientWidth-(Menu Width goes here)+'px' : body.clientWidth-(And here too)+'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');
}

颜色编码可以方便地预览和编辑网站。

Answer 1

确保您的文件以doctype开头。它对于使浏览器行为相似还有很长的路要走。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
...

Answer 2

我最终破解了一个为IE浏览器实现略有不同样式的解决方案。

IE有一种称为条件注释的东西，并且有一个'comment'标签。这些都不被其他浏览器识别，并且都被简单地传递。条件注释采用以下形式：

<!--[if IE]> DO THIS <![endif]-->

由于它具有与典型注释（＆lt;！ - 注释代码 - ＆gt;）相同的结构，因此除了IE之外，它将被所有浏览器传递，显然会解析所有注释以查找某些语句。

评论标记：

<comment> HTML comment </comment>

这被IE认可为评论并被传递，但其他浏览器只是跳过无法识别的＆lt; comment＆gt;标记并处理通常包含在内的代码行。

所以我解决这个问题然后因为我可以让IE以一种方式工作，而其他浏览器则是另一种方法，就是将HTML解决方案放在条件注释中：

<!--[if IE]><div id="TopPane" runat="server" class="toppane" align="left" style="width: 100%; overflow:hidden;"><img src="i5Banner.jpg" alt="" /></div><![endif]-->

以及HTML“评论”标记内其余浏览器的解决方案：

<comment><div id="TopPane" runat="server" class="toppane" align="left"><img src="i5Banner.jpg" alt="" /></div></comment>

这样我可以将IE浏览器与其他浏览器分开处理。它可能看起来很丑陋，但IE显然通过所有IE版本支持它，并且当遇到其他浏览器时它没有造成任何伤害，所以我认为如果没有其他可用的话我可以认为它是一个安全和稳定的解决方案。

我相信这可能会解决IE的许多其他问题和特质。

Answer 3

如果你将这个浮动元素和其他元素包装在另一个（非浮动）div中，并在其上设置overflow属性，它应该可以工作：

HTML：

<div id="wrapper">
    <div id="the_problem_div">
    </div>
</div>

CSS：

#wrapper {
    overflow: hidden;
}

如何为所有浏览器制作“溢出：隐藏”工作

3 个答案: