Блоки в браузерах. Свойство overflow



В различных браузерах блоки отображаются по-разному.. Например в IE (Internet Explorer) блок растягивается, если содержимое превышает его размеры, а в Mozilla Firefox блок не меняется и содержимое выходит за его пределы. Возьмём блок размером 100 на 200 пикселей с текстом внутри, превышающем содержимое этого блока и откроем его в различных браузерах. Вот он результат:

виды блоков в различных браузерах

На рисунке показаны 2 вида одного и того же блока. Слева - отображение блока в Internet Explorer, справа, соответственно, в Mozilla FireFox. Для того, чтобы убрать различия отображения блоков в браузерах средствами CSS, было придумано свойство oferflow. которое может иметь 4 значения.

Overflow:visible

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

Overflow:hidden

Всё содержимое блока обрезается по его границе, причём в любом браузере:

<div style="overflow:hidden; height:100px; width:200px; border-width:thin; border-color:red; border-style:solid;">В различных браузерах блоки ведут себя по-разному. Например в IE (Internet Explorer) блок растягивается, если содержимое превышает его размеры, а в Mozilla Firefox блок не меняется в размерах и содержимое выходит за его пределы. Возьмём блок размером 100 на 200 пикселей с текстом внутри, превышающем содержимое этого блока и откроем его в различных браузерах. Вот он результат:</div>

Выглядеть в любом браузере он будет следующим образом:

В различных браузерах блоки ведут себя по-разному. Например в IE (Internet Explorer) блок растягивается, если содержимое превышает его размеры, а в Mozilla Firefox блок не меняется в размерах и содержимое выходит за его пределы. Возьмём блок размером 100 на 200 пикселей с текстом внутри, превышающем содержимое этого блока и откроем его в различных браузерах. Вот он результат:

Overflow:scroll

В этом случае у блока будет горизонтальная и вертикальная полосы прокрутки:

В различных браузерах блоки ведут себя по-разному. Например в IE (Internet Explorer) блок растягивается, если содержимое превышает его размеры, а в Mozilla Firefox блок не меняется в размерах и содержимое выходит за его пределы. Возьмём блок размером 100 на 200 пикселей с текстом внутри, превышающем содержимое этого блока и откроем его в различных браузерах. Вот он результат:

Overflow:auto

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

В различных браузерах блоки ведут себя по-разному. Например в IE (Internet Explorer) блок растягивается, если содержимое превышает его размеры, а в Mozilla Firefox блок не меняется в размерах и содержимое выходит за его пределы. Возьмём блок размером 100 на 200 пикселей с текстом внутри, превышающем содержимое этого блока и откроем его в различных браузерах. Вот он результат:

2012 год.


<<Предыдущая | В раздел | Следующая>>