Блоки в браузерах. Свойство overflow
В различных браузерах блоки отображаются по-разному.. Например в IE (Internet Explorer) блок растягивается, если содержимое превышает его размеры, а в Mozilla Firefox блок не меняется и содержимое выходит за его пределы. Возьмём блок размером 100 на 200 пикселей с текстом внутри, превышающем содержимое этого блока и откроем его в различных браузерах. Вот он результат:
На рисунке показаны 2 вида одного и того же блока. Слева - отображение блока в Internet Explorer, справа, соответственно, в Mozilla FireFox. Для того, чтобы убрать различия отображения блоков в браузерах средствами CSS, было придумано свойство oferflow. которое может иметь 4 значения.
Overflow:visible
Это значение используется по умолчанию, поэтому и блоки будут выглядеть в браузерах, как на скриншоте выше.
Overflow:hidden
Всё содержимое блока обрезается по его границе, причём в любом браузере:
В различных браузерах блоки ведут себя по-разному. Например в IE (Internet Explorer) блок растягивается, если содержимое превышает его размеры, а в Mozilla Firefox блок не меняется в размерах и содержимое выходит за его пределы. Возьмём блок размером 100 на 200 пикселей с текстом внутри, превышающем содержимое этого блока и откроем его в различных браузерах. Вот он результат:
Выглядеть в любом браузере он будет следующим образом:
В различных браузерах блоки ведут себя по-разному. Например в 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 год.
| В раздел | Следующая>>