如何让＆QUOT;溢出：隐藏＆QUOT;对所有的浏览器 [英] how to make "overflow: hidden" work for all browsers

问题描述

问题：

我目前正在创建一个使用的div和CSS而不是HTML表格布局网页布局。我想，当然，这要能在所有主流浏览器进行操作。

I am currently creating a webpage layout using divs and css rather than an HTML table layout. I want, of course, for this to be able to operate across all major browsers.

我有一个横幅，其中有超过它的左边部分的浮动菜单窗格。的问题是，如果该横幅是所提供的空间太宽，它跳转到菜单（它是较宽）下方的空间，并采取所有网页的内容与它

I have a pane for a banner, which has a floated menu over the left portion of it. The problem is that if the banner is too wide for the space provided, it jumps to a space below the menu (where it is wider) and takes all of the pages content with it.

试图解决方案：

显而易见的解决方案是使用溢出：隐藏属性在我的CSS。的问题是，这并不工作在IE。我看，这是因为我有它相对位置（这是真的），但我没有看到围绕在这种情况下使用相对定位的任何方式。我必须保持它。

The obvious solution is to use the "overflow: hidden" property in my css. The problem is that this doesn't work in IE. I read that this is because I have it positioned relatively (which is true), but I don't see any way around using relative positioning in this case. I must keep it.

我也看了，你可以在面板的宽度设置为东西除了默认，然后在溢出：隐藏属性将生效。这是否解决了IE浏览器的问题（设置宽度为100％），但在Chrome带来一个问题（和潜在的其他浏览器一样），其中为旗帜的获分配的空间，太宽的页面，然后镀铬进行同样的操作IE原本 - 推横幅挂在了页面的底部。此解决方法可以工作，但我需要定义的宽度值是100％ - menuWidth因为是在左侧的菜单。我想这样的：

I also read that you could set the width of the pane to something besides the default, and then the "overflow: hidden" property would take effect. This DOES solve the problem in IE (setting width to 100%), but creates a problem in chrome (and potentially other browsers as well) where the alloted space for the banner is too wide for the page, and then chrome behaves the same way IE had originally - pushing the banner to the bottom of the page. This workaround could work, but I would need to define the width value as "100% - menuWidth" since there is a menu over the left side. I tried this:

风格=WIDTH：前pression（document.compatMode =='CSS1Compatdocument.documentElement.clientWidth-（菜单宽度放在这里）+'像素'：body.clientWidth- （这里太）+'像素'）;

不过，使用前pression似乎并没有启用溢出的财产，即使直接设置宽度一个简单的值呢。

But using the expression doesn't appear to enable the "overflow" property, even though directly setting the width a simple value does.

编辑：是在要求我重视我的code

At request I have attached my code.

HTML：
    
    
    
    
    

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');
}

的颜色编码，以允许该网站的容易previewing和编辑。

The color coding is to allow for easy previewing and editing of the site.

推荐答案

我最终砍死了实现略有不同风格的IE浏览器的解决方案。

I eventually hacked a solution that implemented slightly different styling for IE browsers.

IE浏览器有一些所谓的有条件的意见，并有一个注释标签。这些都不是通过其他浏览器的认可，都只是传过来。有条件的意见采取以下形式：

IE has something called conditional comments, and has a 'comment' tag. Neither of these are recognized by other browsers, and are both simply passed over. The conditional comments take the following form:

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

由于它具有相同的结构作为一个典型的评论（LT;！ - 评论code - >）。它是由IE浏览器之外，这显然解析寻找某些陈述所有评论所有的浏览器通过了在

Since it has the same structure as a typical comment (<!-- Commented code -->) it is passed over by all browsers besides IE, which apparently parses all comments looking for certain statements.

注释标记：

<comment> HTML comment </comment>

这是识别为IE一个评论，传递了，但其他浏览器只是跳过无法识别和LT;注释>标签和处理code线里面包含通常

This is recognized as a comment by IE, and is passed over, but other browsers just skip the unrecognized <comment> tag and process the line of code contained inside normally.

所以，我解决这个问题呢，因为我能得到IE浏览器的工作方式之一，和其他浏览器另一个是把条件注释里面的HTML解决方案：

So my solution to this problem then since I could get IE to work one way, and other browsers another, was to place the HTML solution inside conditional comments:

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

和HTML注释标签中对其余的浏览器解决方案：

and the solution for the remaining browsers inside the HTML 'comment' tags:

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

这个方法，我可以把IE从其他浏览器单独的浏览器。它可能看起来难看，但IE浏览器显然是支持通过所有版本的IE浏览器，当其他浏览器遇到它造成任何伤害，所以我想我可以认为这是一个安全和稳定的解决方案，如果没有其他可用。

This way I could treat IE browsers separately from other browsers. It may look ugly, but IE has apparently supported it through all IE versions and it causes no harm when encountered by other browsers, so I think I can consider it a safe and stable solution if nothing else is available.

我认为，这可能提供了一种方法上的许多IE的其他问题和特性。

I believe that this may offer a way around many of IE's other problems and idiosyncrasies.

这篇关于如何让＆QUOT;溢出：隐藏＆QUOT;对所有的浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！