Условные стили и хаки для IE6

Тема в разделе "Другие языки", создана пользователем arman29, 1 авг 2011.

Модераторы: Цукер
  1. arman29

    arman29 Генератор идей

    Moderator
    • Супермодератор
    Регистр.:
    30 июн 2008
    Сообщения:
    1.236
    Симпатии:
    666
    Нет такого web-разработчика, который бы не сталкивался с проблемами в IE6. Однако, если вы хотите называть себя профессионалом, вы должны быть в состоянии справиться с ними.

    Я придерживаюсь того мнения, что для решения проблем с IE нежелательно использовать хаки. Они неприемлемы, поскольку они основаны на нестандартных решениях, а, следовательно, вы не можете предсказать, как они поведут себя в новых версиях браузеров. Полнофункциональным решением при борьбе с некорректным отображением в IE6 является использование условных стилей. Тем более, что условные стили поддерживает вся линейка интернет-эксплореров, вплоть до IE 8, и с их помощью можно написать стиль для любой версии этого браузера или для нескольких версий одновременно.

    Зачем использовать условные стили?
    1. Если у вас есть проблема отображения, её обязательно нужно исправить
    2. Использование условных стилей поможет вам исправить проблемы с IE не прибегая к хакам, оставляя ваш код чистым
    3. Использование этой техники одобрено Microsoft
    Кстати, условные стили не обязательно должны базироваться только на CSS, вы можете также подгружать различные стили для различных браузеров при помощи JavaScript.

    Примеры использования условных стилей

    1. Подгружаем стили для всех версий IE
    Код:
    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
    <![endif]-->
    2. Прячем стили от всех версий IE
    Код:
    <!--[if !IE]><!-->
    <link rel="stylesheet" type="text/css" href="not-ie.css" />
    <!--<![endif]-->
    3. Подгружаем стили только для IE7
    Код:
    <!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
    <![endif]-->
    4. Подгружаем стили только для IE6
    Код:
    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
    <![endif]-->
    5. Подгружаем стили только для IE5
    Код:
    <!--[if IE 5]>
    <link rel="stylesheet" type="text/css" href="ie5.css" />
    <![endif]-->
    6. Подгружаем стили только для IE5.5
    Код:
    <!--[if IE 5.5000]>
    <link rel="stylesheet" type="text/css" href="ie55.css" />
    <![endif]-->
    7. Подгружаем стили для IE6 и ниже
    Код:
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
    <![endif]-->
    
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
    <![endif]-->
    8. Подгружаем стили для IE7 и ниже
    Код:
    <!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
    <![endif]-->
    
    <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
    <![endif]-->
    9. Подгружаем стили для IE8 и ниже
    Код:
    <!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
    <![endif]-->
    
    <!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
    <![endif]-->
    10. Подгружаем стили для IE6 и выше
    Код:
    <!--[if gt IE 5.5]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />/
    <![endif]-->
    
    <!--[if gte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
    <![endif]-->
    11. Подгружаем стили для IE7 и выше
    Код:
    <!--[if gt IE 6]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
    <![endif]-->
    
    <!--[if gte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
    <![endif]-->
    12. Подгружаем стили для IE8 и выше
    Код:
    <!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
    <![endif]-->
    
    <!--[if gte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
    <![endif]-->
    Ну что же, выше приведены основные конструкции применения условных стилей. Если вам этого не достаточно, или вы просто из любопытства хотите узнать как выглядят CSS-хаки, приведу ниже несколько примеров. Почему их не желательно использовать я упоминал в самом начале этой статьи.

    Стиль только для IE7
    Код:
    * html #div {
    height: 300px;
    }
    Стиль только для IE7
    Код:
    * html #div {
    height: 300px;
    }
    Скрыть стиль от IE7
    Код:
    #div {
    _height: 300px;
    }
    Скрыть стиль от IE6 и ниже
    Код:
    #div {
    height/**/: 300px;
    }
    
    html > body #div {
    height: 300px;
    }
    Перевод: efimov.ws
    Оригинал: css-tricks.com
     
  2. duncan

    duncan батяр з личакова

    Регистр.:
    10 апр 2007
    Сообщения:
    1.596
    Симпатии:
    441
    хак, например, min-height
    для IE6:

    Код:
    #div{ min-height:400px;}
    #div{ -height: 400px;}
    
     
  3. bifot

    bifot Писатель

    Регистр.:
    17 дек 2013
    Сообщения:
    1
    Симпатии:
    0
    В ИЕ при клике на ссылку, во время клика появляется серый фон. Он совершенно не вписывается в дизайн.
    Чтобы было понятнее, вот скрин:
    [​IMG]
    Решается он легко, одной строчкой:
    Код:
    a { background: none; }
     
  4. xotox

    xotox Постоялец

    Регистр.:
    10 янв 2013
    Сообщения:
    51
    Симпатии:
    3
    да зубудьте вы уже о таких браузерах как ie6-8, их уже давно никто не использует, что голову ломать и выдумывать хаки, лучше html5 и css3 изучайте и пользуйтесь всеми преимуществами данных возможностей
     
  5. DevOrc

    DevOrc Создатель

    Регистр.:
    5 июн 2014
    Сообщения:
    31
    Симпатии:
    10
  6. snooper

    snooper Постоялец

    Регистр.:
    2 июн 2014
    Сообщения:
    68
    Симпатии:
    19
    я тебя огорчу, используют.
    Иногда имею верстку из-за бугра, так они там все на старых ИЕ версиях. Почему, казалось бы. А ответ прост. Они не покупают на офисы, и даже домой новые версии софта мелкомягких, а юзают старые версии, Хря, 2003 офис и так далее, а зачем тратить лишние деньги?. Ну и так как у нас не юзают на лево и право пиратский софт, это для них дико.
    По этому верстка под ИЕ 4+ ещё долго будет актуальной, как минимум для бугра, ну и платят они между прочим хорошо за эти "костыли" :)