css-html.org

Как нам известно Internet Explorer версий 6 и 7 имеет не полную поддержку значения display: inline-block;. Эти версии Интернет Эксплорера нормально рендерят inline-block-чные элементы, только если по дефолту эти элементы имею значение inline (это такие элементы как a, em, span, strong и т.д.).

А между прочим это значение может стать полезным при реализации горизонтальных менюшек и, например, пагинации.

А как же заставить блочные (и прочие отличные от inline) элементы рендериться как inline-block? Для этого необходимо нужному элементу присвоить display: inline; zoom: 1;. С помощью zoom: 1; мы присваиваем элементу hasLayout.

Таким образом элементы с display: inline; zoom: 1; в IE 6 и 7 будут отоборажаться как inline-block. Конечно же не забываем обрамлять условными комментариями код написаный исключительно для IE.

Этим решением со мной поделился добрый человек Сергей Чикуёнок, за что ему большое спасибо.

Ещё немного материала по теме.

UPD: оказывается в FF2 тоже не всё чисто с display: inline-block;. Вот ещё одна заметка о кроссбраузерном использовании inline-block. Хотя по статистике LiveInternet доля FF2 в рунете составляет всего 2,2%, но всё равно, думаю, будет не лишним позаботиться о том, чтоб и в этом браузере всё отображалось нормально.

Для корректного отображения inline-block в FF2 нужно элементу прописать следующие стили:

display: -moz-inline-stack;
display: inline-block;

UPD 2: Но не всё так просто при использовании -moz-inline-stack. Есть несколько подводных камней, и о них вы можете прочитать на блоге CSS Guru.

На сайте Временно.нет увидел статью о различных помощниках веб-разработчика. В ней автор сделал краткий обзор, в который непременно вошли FireBug и Web Developer Tools для Firefox’а, и DragonFly для Opera. А вот о таких инструментах как IE Developer Toolbar, DebugBar для Internet Explorer’а и WebInspector для Safari я не слыхал.

В общем, если вы не знакомы с каким-либо из этих инструментов, то обязательно ознакомьтесь.

Читая перевод статьи о свойстве hasLayout в браузерах IE, в комментариях увидел ссылку на довольно интересный проект. Автор проекта представляет вашему вниманию готовую JavaScript библиотеку, исправляющую многие баги Internet Explorer’а.

Читать полностью »

via radio-t.com

Вашему вниманию представлено неформальное интервью с Алексом Могилевским из Microsoft. Алекс является архитектором последних версий браузера Internet Explorer и одним из создателей современных стандартов CSS. Речь в подкасте идет в основном непосредственно о Internet Explorer’е. Ведущим интервью являеться неизменный ведущий подкаста «Радио-Т».

Скачать (20.5 Мб, 44 минуты)

По материалам cssing.org.ua.

Сам я относительно недавно решился перейти с табличной верстки на блочную. И если вы тоже в свое время решились сделать этот шаг, то наверняка столкнулись с проблемой, когда нужно выровнять содержимое блока по вертикали. Очень хороший обзор решений о вертикальном выравнивании в блоках я нашел на блоге, с которым вы наверняка знакомы, если увлекаетесь версткой.

Итак, перейду непосредственно к описанию метода.

Для вертикального выравнивания в блоках разработчики W3C создали замечательное свойство display: table-cell;, которое позволяет заставить какой-либо элемент отображаться как ячейка таблицы. При этом добавив vertical-align: middle; мы прекрасно справились бы с поставленной задачей, если бы не Internet Explorer, который ни в какую не хочет поддерживать свойство display: table-cell;. Ниже приведен образец кода, который поможет IE отображать содержимое блока по середине, также как в остальных браузерах:

Читать полностью »

Перевод статьи «Hack-free CSS» for IE с сайта virtuelvis.com.
Перевел Cake_Seller.

Резюме: в статье описываются условные комментарии для Internet Explorer’а, их синтаксис и примеры применения.

Читать полностью »

Решение этой проблемы было найдено здесь – http://www.dynamicdrive.com/forums/showthread.php?t=22176. Сразу предупреждаю – это решение не идеальное! Оно подходит только при вставке PNG’шек с помощью тэга <img>. Если изображение прописать в качестве бэкграунда через стили, то PNG’шка по прежнему будет некорректно отображаться в IE.

К достоинствам данного решения я могу отнести то, что не нужно добавлять никаких идентификаторов в тэге <img>. Т.е. достаточно просто вставить яваскрипт между тэгами <head> </head>.

Читать полностью »