个人中心
gpt4 book ai didi

css - 如何使 "overflow: hidden"适用于所有浏览器

转载 作者：可可西里 更新时间：2023-11-01 13:40:02 25 4
gpt4 key购买 nike

问题:

我目前正在使用 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/

25 4 0
文章推荐： php - CakePHP : Send email to multiple addresses
文章推荐： php - 如何在管理页面wordpress中创建选项卡菜单
文章推荐： Sublime Text 编辑器中的 PHP 语法检查
文章推荐： PHP 密码验证总是返回 false
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com