как заставить "overflow: hidden" работать для всех браузеров

Question

Проблема:

В настоящее время я создаю макет веб-страницы, используя divs и css, а не макет таблицы HTML. Конечно, я хочу, чтобы это работало во всех основных браузерах.

У меня есть панель для баннера с всплывающим меню над левой частью. Проблема заключается в том, что если баннер слишком широкий для предоставленного места, он переходит на место под меню (где он шире) и забирает все содержимое страницы.

Попытки решения:

Очевидным решением является использование свойства "overflow: hidden" в моем css. Проблема в том, что это не работает в 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

В конце концов я взломал решение, в котором реализовано несколько иное оформление для браузеров IE.

В IE есть нечто, называемое условными комментариями, и тег «comment».Ни один из них не распознается другими браузерами, и оба просто пропускаются.Условные комментарии имеют следующий вид:

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

Поскольку он имеет ту же структуру, что и обычный комментарий () он передается всеми браузерами, кроме IE, который, по-видимому, анализирует все комментарии в поисках определенных операторов.

Тег комментария:

<comment> HTML comment </comment>

Это признается IE как комментарий.пропускается, но другие браузеры просто пропускают нераспознанный тег и обрабатывают строку кода, содержащуюся внутри, нормально.

Итак, мое решение этой проблемы, так как я мог заставить 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 2

Убедитесь, что ваш файл начинается с типа документа, например.Это делает долгие пути к тому, чтобы браузеры действовали одинаково.

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

Answer 3

Если вы поместите этот плавающий элемент и другие в другой (не плавающий) div и установите для него свойство overflow, оно должно работать:

HTML:

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

CSS:

#wrapper {
    overflow: hidden;
}