В IE абсолютно (position: absolute) или относительно (position: relative) позиционированные блоки имеют обыкновение игнорировать правило {overflow: hidden} содержащего их элемента и преспокойно выступать за пределы его границ.
Для решения этой проблемы достаточно задать относительное позиционирование (position: relative) самому контейнеру. Приведённый пример это иллюстрирует.
- CSS:
/* дочерний элемент */
#child {background: #ссс; position: relative; top: -25px; }
/* содержащий его контейнер */
#parent {overflow: hidden; position: relative; height: 50px; }- HTML:
<div id="parent"><div id="child">example</div></div>
Дэниэл Глазман (Disruptive Innovations) и Дэвид Хайат (Apple, Inc.) предлагают готовое проработанное дополнение к спецификации CSS, определяющее крайне востребованный в современной вёрстке веб-страниц механизм использования переменных в CSS. Синтаксис прост:
@variables {mybg: #555; mycolor: #fff; }
#myelement {background: var(mybg); color: var(mycolor); }
Что из этого выйдет, покажет время, но Дэниэл, насколько известно автору этих строк, тесно связан с Mozilla, а значит, браузера, где потенциально может быть внедрена такая функциональность, уже два: Firefox и Safari. Более того, тема переменных в CSS уже поднималась в рабочей группе по разработке CSS, куда, насколько известно автору тех же строк, входит и Дэниэл, что дополнительно обнадёживает.
Да легко. Но только в блоге. Незачем пугать людей не в теме. ;-)
Если кто не в курсе. Следующее простое CSS-правило:
HTML {font-size: 100.1%; }
решает сразу две проблемы:
- слишком крупный шаг масштабирования шрифта средствами браузера при использовании только единиц
em;
- различный размер шрифта при просмотре одной и той же страницы в разных браузерах при настройках по умолчанию.
После добавления этого правила можно использовать единицы em сколько влезет.
Stylish — расширение для браузера Firefox, открывающее возможность использования так называемых per-site user styles — индивидуальных пользовательских таблиц стилей для каждого отдельного сайта, применяемых при посещении соответствующих сайтов автоматически.
Как известно, таблицы в IE 5.x даже при указании полного DOCTYPE (просто потому, что IE 5.x понятия о нём не имеет) не наследуют размер шрифта от родительского блока.
Это может вызывать проблемы при использовании относительных размеров шрифтов в целом и различия размера шрифта внутри таблиц в IE 5.x (где размер шрифта таблицами не наследуется) и браузерах с поддержкой web-стандартов (где размер шрифта наследуется) в частности.
Тем не менее, недостаток этот легко устраняется при помощи следующего CSS-правила:
TABLE {font-size: 100%; }
Typetester (бета-версия) — онлайн-инструмент для подбора всех основных параметров текста.
Не так давно W3C сподобился-таки включить в спек CSS3 механизм определения множественных фоновых изображений для одного элемента. Осталось лишь подождать пару лет, пока этот модуль переедет в статус окончательной версии, и ещё лет 5, пока это получит массовую поддержку в реальных браузерах, и счастью кодера не будет предела.
