HTML and CSS   XSLT   JavaScript   Images   Soft   Etc  
Владимир Токмаков

Еще один способ борьбы с «прыгающими» блоками в IE 6 апреля 2007


Для просмотра этого примера необходим IE.

Задача.

Исправить поведение блоков в IE с указанным float и шириной в процентах.

Обнаружил вот, что наличие ненулевого внутреннего отступа справа (padding-right: 1px) у окаймляющего элемента также исправляет эту неприятную ошибку.

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

Как это выглядит в браузере

Колонка шириной 30%
Колонка шириной 70%, которая не скачет
Колонка шириной 30%
Колонка шириной 70%, которая начнет «прыгать» при изменении ширины окна IE
01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
<style type="text/css">
    body { background: #ffffff; }

    .columns { clear: both; width: 100%; //padding-right: 1px; //overflow-x: hidden; }
    .columns .a,
    .columns .b
    { float: left; }
    .columns .a { width: 30%; background: #ccffcc; }
    .columns .b { width: 70%; background: #ffcccc; }

    .wrong_columns { clear: both; width: 100%; margin-top: 1em; }
    .wrong_columns .a,
    .wrong_columns .b
    { float: left; }
    .wrong_columns .a { width: 30%; background: #ccffcc; }
    .wrong_columns .b { width: 70%; background: #ffcccc; }
</style>
<div class="columns">
    <div class="a">Колонка шириной 30%</div>
    <div class="b">Колонка шириной 70%, которая не&nbsp;скачет</div>
</div>
<div class="wrong_columns">
    <div class="a">Колонка шириной 30%</div>
    <div class="b">Колонка шириной 70%, которая начнет &laquo;прыгать&raquo;
        при изменении ширины окна&nbsp;IE</div>
</div>



Share this page:


© 1995–2015 Art. Lebedev Studio