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

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

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™