Родительские страницы:
  1. Главная
  2. Блог
  3. Метки
  4. «кроссбраузерность»

Заметки с меткой «кроссбраузерность»

  • display-table.htc — новые возможности

    В авторскую JavaScript-библиотеку display-table.htc, предназначенную для эмуляции CSS-свойств семейства display: table в IE6/7, добавлены новые удобные возможности.

    1. display-table.htc теперь можно привязать не только напрямую к элементу, подлежащему преобразованию в таблицу, но и к элементу BODY, в результате чего эмуляция display: table будет автоматически применена ко всем элементам, для которых задано CSS-псевдосвойство -dt-display: table.
    2. Теперь можно помещать элементы-ячейки напрямую в элемент-таблицу, сохраняя при этом идеальную чистоту HTML-кода: более нет необходимости ни в дополнительном элементе-прослойке, ни в служебном CSS-классе. Строка таблицы теперь генерируется автоматически, если первому дочернему элементу исходного элемента-таблицы задано CSS-псевдосвойство -dt-display: table-cell.
    3. Реализована эмуляция CSS-свойства border-spacing с помощью псевдосвойства -dt-border-spacing, задаваемого для исходного элемента-таблицы.

  • Исправляем отрисовку border-radius (+)

    В браузерах, отличных от Firefox, существуют проблемы в отрисовке блоков с border-radius. Но в большинстве случаев их можно обойти.

  • Псевдокласс :first-child и комбинатор + в IE7 (+)

    Несмотря на то, что формально IE7 поддерживает CSS-селектор :first-child и комбинатор +, есть ограничение: если в HTML-коде «на месте» элемента, на который указывает CSS-селектор, окажется комментарий, IE7 не применит стили к элементу, следующему за комментарием.

    Однако проблему можно обойти путём динамического удаления HTML-комментариев как DOM-узлов средствами JavaScript по факту загрузки HTML-страницы.

  • Эмуляция display: table для IE6/7

    display-table.htc — авторская JavaScript-библиотека для эмуляции CSS-свойств семейства display: table в IE6 и IE7, лишённых встроенной их поддержки.

  • {overflow: hidden} и {position: relative} в IE

    В IE 6/7 абсолютно (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>

  • 5 советов по XHTML/CSS-вёрстке (+)

    В рамках своеобразной эстафеты, открытой Никитой Селецким и переданной мне Александром Исаковым (UGgallery), публикую 5 небольших практических рекомендаций, касающихся XHTML/CSS-вёрстки и в данном блоге ранее не озвученных.

  • SWFObject 2.0

    Относительно незаметно вышла новая версия JavaScript-библиотеки SWFObject, предназначенной для удобной и соответствующей веб-стандартам кроссбраузерной вставки Flash-роликов на веб-страницы.

    Между тем SWFObject 2.0 является преемником сразу двух библиотек схожего назначения: предыдущей версии SWFObject (1.5) и UFO, авторы которых объединили усилия для создания более совершенного механизма вставки Flash-роликов в лице новой SWFObject 2.0 и теперь предлагают её к использованию вместо своих прежних разработок.

  • CSS: % + em

    Внимание
    Информация в этой заметке устарела. Современные браузеры работают с размером шрифта вполне единообразно.

    Следующее простое CSS-правило:

    HTML {font-size: 100.1%; }

    решает сразу две проблемы:

    • слишком крупный шаг масштабирования шрифта средствами браузера при использовании только единиц em;
    • различный размер шрифта при просмотре одной и той же страницы в разных браузерах при настройках по умолчанию.

    После добавления этого правила можно использовать единицы em сколько влезет.

  • Эмуляция наследования размера шрифта таблицами в IE 5.x

    Как известно, таблицы в IE 5.x даже при указании полного DOCTYPE (просто потому, что IE 5.x понятия о нём не имеет) не наследуют размер шрифта от родительского блока.

    Это может вызывать проблемы при использовании относительных размеров шрифтов в целом и различия размера шрифта внутри таблиц в IE 5.x (где размер шрифта таблицами не наследуется) и браузерах с поддержкой web-стандартов (где размер шрифта наследуется) в частности.

    Тем не менее, недостаток этот легко устраняется при помощи следующего CSS-правила:

    TABLE {font-size: 100%; }