Подписаться на блог
В Твиттере

Реплики и ссылки на заметки

В Фейсбуке

Ссылки на заметки

Вконтакте

Ссылки на заметки

В Телеграме

Ссылки на заметки

В Тумблере

Заметки целиком

В Же-же

Заметки целиком

По РСС

Заметки целиком

Если что-то из этого не работает, напишите мне: ilyabirman@ilyabirman.ru.

Три маленьких открытия

Так не бывает, чтобы сверстал сайт, а он — хоба-на — работает во всех браузерах отлично. Каждый раз приходится что-то подкручивать, подделывать. Но с другой стороны, благорадря этому узнаёшь всё больше разного. Сегодня я узнал три разного.

1. Как заставить IE нормально понимать z-index?

Есть такая проблема, что IE применяет z-index’ы не ко всему документу, а как-то выборочно. Например, относительно позиционированный элемент оказывается «ближе к пользователю», чем статический, даже если его z-index меньше. Создаётся впечатление, что каждый relative-элемент создаёт своё пространство z-индексов.

Исследования показали, однако, что это ложное впечатление. На самом деле своё пространство z-индексов едино для всех относительных элементов. Таким образом, проблема решается просто путём изменения статического элемента на относительный. По идее, других проблем это вызвать не должно?

2. Как в Mozilla изобразить overflow-x/overflow-y?

У меня тут ситуация такова, что на странице почти обязательно появляется горизонтальный скроллинг (по смыслу), но видимым он быть не должен. В IE эта проблема решается вот так:

overflow-x: hidden;

Но на самом деле свойства overflow-x и overflow-y придумали в Microsoft, а W3C про них ничего не знают. Как же сделать это в Мозилле? А вот так:

overflow: -moz-scrollbars-vertical;

Итого имеем:

body {
  overflow: -moz-scrollbars-vertical;
  overflow-x: hidden;
}


Осталось понять, как сделать то же самое в Опере.

3. Как в Opera изобразить overflow-x/overflow-y?

А никак. То есть, как, но только совсем другим путём. Потыкавшись в Гуголь минуты полторы и не найдя готового решения (вроде -o-scrollbars-vertical), я решил, что нужно сочинять своё имеющимися средствами (то есть, средствами W3C). Но это оказалось просто.

W3C считает, что свойство overflow может иметь значения visible, hidden, scroll, auto, inherit. То есть, применяя это всё к body, мы можем получить либо полное отсутствие скроллбара, либо присутствие обоих (понятно, что речь идёт о странице, которая не помещается в отведённые ей рамки). Но кто сказал, что применять его нужно к body? Итак, решение.

Внутрь body запихиваем вот такой вот div:

#wrapper {
  width: 100%;
  height: auto;
  overflow: hidden;
}


И весь остальной контент запихиваем уже в него. Теперь всё работает так, как нам надо. Элемент body отображает только вертикальный скроллбар; горизонтальный ему не нужен, так как единственный элемент, находящийся внутри него — #wrapper — имеет ширину 100%, то есть прекрасно влезает по ширине.

В этом месте кажется, что можно выкинуть IE-only overflow-x и MZ-only -moz-scrollbars-vertical, дабы получить красивый, внятный и совместимый со стандартами CSS. Но не тут-то было. Mozilla всё-таки снова отображает горизонтальный скроллинг. Как же она его любит...

В общем, для надёжности оставляем всё, и overflow-x, и -moz и wrapper. И чёрт с ними, со стандартами.

Hope it helps(tm)
Подписаться на блог
Поделиться
Отправить
1 комментарий
Rost Firsikov
Честно говоря меня уже задрало разночтение стандартов разными производителями. Чего стоит только понимание ширины с padding и margins разными браузерами. Или полноцветный PNG с Alpha прозрачностью... Иногда хочется выбросить нафик стили и сверстать страницу таблицей (мечтательно улыбаясь). Насколько проще было... Хотя и тут полная фигня с разночтением стандартов. Ну например, какого черта IE в ячейку с формой вставляет еще одну строку снизу? Или почему gekko игнорирует border=0 в тэге table?

Может действительно ваять всё в соответствии со стандартом, а пользователей IE форвардить на страничку download Opera или download Firefox?
Илья Бирман
какого черта IE в ячейку с формой вставляет еще одну строку снизу?
Потому, что IE считает, что:

form {
  margin-bottom: 1em;
}


Как и большинство проблем с IE, эта проблема решается легко.
почему gecko игнорирует border=0 в тэге table
Думаю, что потому, что нет такого атрибута. Мне другое интереснее, почему IE игнорирует border-spacing в стилях? Из-за этого ему приходится писать cellspacing=«0», а я это терпеть не могу.

Пользовательский интерфейс
Доступен первый раздел
электронного учебника

Популярное