Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

Блоки в браузерах

В различных браузерах блоки ведут себя по-разному. Например в 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 пикселей с текстом внутри, превышающем содержимое этого блока и откроем его в различных браузерах. Вот он результат:

Overflow:scroll;

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

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

Overflow:auto;

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

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

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