IE6 сокращает содержимое, когда родительский контейнер слишком узкий - PullRequest
Новая
       26

IE6 сокращает содержимое, когда родительский контейнер слишком узкий

0 голосов
/ 12 ноября 2009

В следующем примере правый контейнер отображается справа от левого в браузерах, соответствующих стандартам, но в IE6 синий правый контейнер отображается ниже левого. IE6 эффективно снижает его, потому что родительский контейнер уже, чем общая ширина левого и правого боковых контейнеров.

У меня есть следующий HTML: 

<html>
    <head>
       <style>
        #parentcntnr{
            width: 900px;
            border: 3px solid black;
        }

        #leftside{
            width: 200px;
            float: left;
            background-color: red;
            position: relative;

        }

        #rightside{
            width: 800px;
            background-color: blue;
            margin-left: 210px;
        }

    </style>
</head>
<body>
    <div id="parentcntnr">
        <div id="leftside"> content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br> content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br></div>
        <div id="rightside">content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br></div>
    </div>
</body>

Как мне сделать этот рендер как в Firefox 3.5? Я бы хотел, чтобы правый и левый боковые контейнеры оставались рядом, а горизонтальная полоса прокрутки появлялась, когда родительский контейнер меньше общей ширины дочерних контейнеров.

Для справки: это пример, который показывает проблему, с которой я сталкиваюсь на веб-сайте. Вышеупомянутое поведение происходит, когда размер окна браузера так, что он уже, чем сумма двух дочерних значений ширины. Это создает проблему для клиентов с низким разрешением экрана.

Ответы [ 3 ]

2 голосов
/ 12 ноября 2009 
<html>
<head>
   <style>
            #parentcntnr{
                    width: 900px;
                    border: 3px solid black;
            }

            #leftside{
                    width: 200px;
                    float: left;
                    background-color: red;
                    position: relative;

            }

            #rightside{
                    width: 800px;
                    background-color: blue;
                    position: absolute;
                    float: right;
            }

    </style>
</head>
<body>
    <div id="parentcntnr">
            <div id="leftside"> content </br>content </br>content </br>content  </br>content </br>content </br>content </br>content </br> content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br></div>
            <div id="rightside">content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br></div>
    </div>

Это исправляет.

0 голосов
/ 12 ноября 2009

Прежде чем продолжить, убедитесь, что вы используете правильный doctype . Используйте <!doctype html>. Вам также нужно заменить все эти неправильные элементы </br> на <br>.

Первая проблема в том, что #rightside слишком широкий. Это 800px, тогда как после заполнения контейнера шириной 900px с содержимым шириной 200px осталось только 700px , #leftSide. Итак: 

#rightside{
    width: 700px;
}

должен это исправить.

Вторая проблема в том, что вы нигде не плаваете #rightSide. Он не будет плавать влево или вправо от #leftSide. Мы хотим, чтобы оно было на правой стороне , поэтому 

#rightside{
    float: right;
}

должно это исправить. Это также делает margin-left полностью лишним.

Теперь это должно выглядеть нормально в старых браузерах IE (только потому, что они глючат на поплавках). Но в лучших браузерах div-контейнер не будет оборачивать оба всплывающих элемента. Это правда, вам все еще нужно очистить оба всплывают впоследствии. Это должно быть сделано путем добавления в основном 

<br style="clear: both;">

как последний элемент контейнера div.

Теперь конечный результат, который работает во всех браузерах, должен выглядеть следующим образом: 

<!doctype html>
<html>
    <head>
       <style>
            #parentcntnr {
                width: 900px;
                border: 3px solid black;
            }
            #leftside {
                width: 200px;
                float: left;
                background-color: red;
            }
            #rightside {
                width: 700px;
                float: right;
                background-color: blue;
            }
            . clear {
                clear: both;
            }
        </style>
    </head>
    <body>
        <div id="parentcntnr">
            <div id="leftside"> content <br>content <br>content <br>content  <br>content <br>content <br>content <br>content <br> content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br></div>
            <div id="rightside">content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br></div>
            <br class="clear">
        </div>
    </body>
</html>

Надеюсь, это поможет.

0 голосов
/ 12 ноября 2009

Если вы поместите свой правый плавающий элемент перед левым плавающим элементом в исходном дереве:





это должно заботиться о вашей плавающей проблеме. Я не уверен, что вы можете предотвратить их разрушение, когда родительский контейнер слишком узкий, но IE6 имеет некоторую причудливую логику переполнения, это точно.
...