Заметки с тегом «ie»

Дефект в IE при большом количестве начертаний в @font-face

В статье «Setting Weights And Styles With The @font-face Declaration» рассматривается любопытный случай, возникающий в IE7 и IE8 при объединении различных начертаний шрифта. Если количество начертаний для одной гарнитуры будет больше четырёх, то браузер будет не корректно их использовать.

Так же упоминается тот факт, что это вызывает падение браузера на iPad 1. Но в комментариях указывают на то, что дефект, приводящий к падению браузера, был исправлен более двух лет назад. У меня он не воспроизвёлся.

Комментарии к заметке: 2

Самопроизвольное увеличение ширины кнопки в IE

В старых версиях IE кнопки обладали очень не приятным эффектом. У них появлялись отступы слева и справа, когда длина кнопки становилась значительной. Это могло проявляться как при наличии padding-left и padding-right, так и при достаточно длинной надписи. Особенно это становится актуально для кнопок, которые специально декорируются и, как правило, имеют шрифт большого кегля.

В любом случае избавиться от этих отступов можно, добавив к тегу не совсем очевидный (кто бы сомневался) стиль

overflow: visible;

Пример «до» и «после» для IE6 и IE7.

overflow: visible убирает отступы у кнопки в IE6 и IE7

В новых версиях такого эффекта не наблюдается. Это правило может свободно применяться в основном стиле страниц.

Комментарии к заметке: 3

Определение браузера

Когда я искал материал для статьи «Обнаружение браузера Opera 9», то наткнулся на интересный тест браузеров, выполненный исключительно на CSS, — http://www.brunildo.org/test/csshacks3.html.

Этот тест успешно определяет версию IE, версию Firefox ниже 3.0 (Gecko <1.9) и 3.x (Gecko 1.9). Однако определение версий Webkit и Opera в нем нет.

Другие тесты и эксперименты.

Оставте свой комментарий

Исправляем дефект CSS-селектора «child»

В спецификации CSS 2.1 есть замечательное правило «child selector». Но оно пока не получило популярности из-за того, что не работает в IE6. Первая и, к сожалению, не без дефектов реализация в этой линейке браузеров была сделана в IE7.

Однако есть трюк, который эмулирует действие этого правила.

<div id="article">
    <h1>Header</h1>
    <p>First level paragraph</p>
    <div>
        <p>Paragraph inside div element</p>
    </div>
</div>
<p>Copyright info</p>

p {
    font-size: 14px;
}
#article > p {
    font-size: 18px;
    font-weight: bold;
}

Всем параграфам документа назначается высота шрифта 14px. Параграфы, которые являются непосредственными потомками блока с идентификатором article, выделяется жирным шрифтом и высотой шрифта 18px.

Для IE используем следующие правила.

#article p {
    font-size: 18px;
    font-weight: bold;
}
#article * p {
    font-size: 14px;
    font-weight: normal;
}

Сначала все потомки блока с идентификатором article получают специальные правила, а затем у внучатых потомков значения измененных стилей возвращаются назад.

Главным недостатком этого способа является то, что требуется знать исходные значения стилей, которые изменялись.

Оставте свой комментарий

Определение IE6 через CSS селектор

Определение версии браузера через переменную User-Agent не всегда работает правильно из-за того, что это значение легко подменить. Разработчики jQuery вообще решили отказаться от его использования, предложив как альтернативу определение особенностей браузера программно. Различные реализации одних и тех же свойств или отсутствие какой-либо реализации позволяет четко выделить Internet Explorer на фоне остальных. Но вот выделить какую-либо версию уже становится большой проблемой.

Следуя предложенной концепции выявления особенностей браузера, я решил использовать CSS селектор tag[class] для обнаружения IE6. В старших версиях IE, как и в других современных браузерах, этот селектор корректно обрабатывается, а в 6-й версии он игнорируется.

(function ($) {
    var cssCode = 'html.jQueryDetectIE6{background-color:#ffffff;}html.jQueryDetectIE6[class]{background-color:#fefefe;}',
        styleElement, html;
    try {
        html = $("html");
        if (html.length) {
            styleElement = document.createElement("style");
            styleElement.type = "text/css";
            if (styleElement.styleSheet) {
                styleElement.styleSheet.cssText = cssCode;
            } else {
                styleElement.appendChild(document.createTextNode(cssCode));
            }
            $("head").prepend(styleElement);
            html.addClass("jQueryDetectIE6");
            $.support.cssClassSelector = /254|fe/ig.test(html.css("backgroundColor"));
        }
    } catch (e) {
        // nothing here
    } finally {
        // cleanup
        if (html && html.length) {
            html.removeClass("jQueryDetectIE6");
        }
        if (styleElement && styleElement.parentNode) {
            styleElement.parentNode.removeChild(styleElement);
        }
    }
}(jQuery));

Во время своего выполнения функция добавляет необходимый стиль в тег head и проверяет их влияние на элемент. Результат проверки заносится в поле $.support.cssClassSelector.

Флаг хотелось установить еще до полной загрузки документа. По этому требовалось свести к минимуму модификацию DOM-документа. Это удалось решить через проверку цвета у корневого элемента html.

Другая проблема возникла из-за различного поведения браузеров при добавлении стилей через JavaScript. IE и Safari начинают применять эти правила только, если они были добавлены в тег head. Тут нет побочных эффектов, так как этот элемент уже существует на момент выполнения кода. Но сам элемент style нужно сформировать особым образом. В IE есть свойство styleSheet у элемента, которое позволяет работать с правилами. В свою очередь у объекта styleSheet есть поле cssText, которое позволяет получать и устанавливать текстовое представление правил. Хочу отметить, что изменить свойство cssText можно только однажды. Если все же потребуется его поменять, то нужно будет удалить старый элемент style и добавить новый с обновленными значениями.

Оставте свой комментарий