Хаки для браузеров

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем alex_storm, 16 янв 2013.

  1. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    559
    Для IE 6:

    Хак с подчеркиванием
    HTML:
    .style {
    _background: #F00; /* - Валидатор при проверке может выдать ошибку, не всегда, но может.*/
    }
    Хак с минусом
    HTML:
    .style{
    	-background:#ff0;
    }
    Хак с дробью
    HTML:
    .style{
    backr\ground:#ff0; /*Не работает перед буквами a,b,c,d,e,f*/
    }
    Хак с восклицательным знаком
    HTML:
    .style{
    background:green;
    background:red !ie; /*Работает в IE6 и IE7*/
    }
    Хак с //
    HTML:
    style{
    //background:red;
    }
    Хак * html
    HTML:
    * html .style {
    background: #F00;
    }
    Хак *+html
    HTML:
    *+html .style{
    background:#ff0;
    }
    Скрытие стилей от IE6 и ниже
    При помощи !important
    HTML:
    .style{
    	background:#ff0 !important; /*для всех браузеров*/
    	backgound:#ccc; /*для IE 6*/
    }
    При помощи вставленного комментария
    HTML:
    .style{
    background/**/:#ff0;
    }
    При помощи присвоения стиля, только к последовательному элементу
    HTML:
    .style > div{
    	backround:#ff0;
    }
    Хак с прозрачностью png файлов
    Для этого используется IE PNG скачать последнюю версию
    В таблице стилей подключаем IE PNG
    HTML:
    * { behavior : url ( "css/iepngfix.htc" ); }
    И затем для вставки png файла прописываем фильтр
    HTML:
    .style {
    background : none ;
    filter : progid : DXImageTransform.Microsoft.AlphaImageLoader ( src= '/images/png-image.png' , sizingMethod= 'scale' );
    }
    Хак с Min-width и Max-width
    HTML:
    .style {
    min-width : 500px ;
    width : expression ( document.body.clientWidth < 500? "500px" : "auto" );
    }
    Хак Min-height
    HTML:
    .style {
    min-height : 100% ;
    height : auto !important ;
    height : 100% ;
    }
    Подключение и скрытие таблиц стилей для IE6

    Подгружаем таблицу стилей для IE6
    HTML:
    <!--[if IE 6.0]>
     
    <link rel="stylesheet" type=" text/css " href="stylesheet/ie6.css">
    <![endif]-->
    Прячем таблицу стилей от IE6
    HTML:
    <!--[if !IE 6.0]><!-->
    <link rel="stylesheet" type="text/css" href=" stylesheet/stylesheet.css " />
    <!--<![endif]-->
     
    sorioshi нравится это.
  2. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    559
    Для IE 7 и для IE8


    Только IE7
    HTML:
    *:first-child+html #MyDiv {
    margin : 2px 2px 2px 2px;
    }
    Хак со звездочкой
    HTML:
    #MyDiv {
    *margin : 2px 2px 2px 2px;
    }
    Подключение таблицы стилей IE7
    HTML:
    <!--[if IE7]>
    <link rel="stylesheet" type="text/css" href="stylesheet/ie7.css" >
    <![endif]-->
    Изменение рендеринга IE8 подключаем в <head>
    HTML:
    <meta http-equiv="X-UA-Compatible" content="IE8" />
    Основные значения content следующие:
    — «IE=7» — включает режим Strict в котором рендерятся все страницы;
    — «IE=EmulateIE7» — включает режим совместимости с IE7, в котором в зависимости от DOCTYPE будет применяться либо стандартный для IE7 режим рендеринга (Strict), либо quirks-режим (Quirks);
    — «IE=EmulateIE8» — страница форсируется в режим «IE8 Standards» вне зависимости от того, включен ли режим совместимости «Compatibility View» в браузере пользователя, а quirks-страницы отображаются в Quirks-режиме.
    — «IE=8» — включается режим максимального соответствия стандартам «IE8 Standards».

    Хак для IE8
    HTML:
    .style
    {
    color /*\**/: blue\9
    }
    Упрощенный вариант хака для IE8

    HTML:
    .style
    {
    color: blue\9
    }
    Хак для IE8
    HTML:
    .style {
      color:red\0/; /* красный */
    padding:70px\0/; /* отступ 70px только для Internet Explorer 8 */
    }
    Отключение стилей в IE8
    HTML:
    div, #ie#fix {
    background: #000;
    }
    Подключение таблицы стилей IE8
    HTML:
    <!--[if IE8]>
    <link rel="stylesheet" type="text/css" href="stylesheet/ie8.css" >
    <![endif]-->
     
  3. alxndr52

    alxndr52

    Регистрация:
    5 фев 2013
    Сообщения:
    35
    Симпатии:
    13
    Еще немного

    Для Opera 9 :
    HTML:
    @media all and ( min-width : 0px )	{
      head~body .class {
    	color : #F00 ;
      }
    }
    @media all and ( width )	{
      .class {
    	color : #F00 ;
      }
    }
    Для Safari
    HTML:
    body:first-of-type .class	{ color : #F00 ; }
    html:root*.class	{ color : #F00 ; }
    body:first-of-type .class	{ color : #F00 ; }
    body:first-of-type .class	{ color : #F00 ; }
     
    @media screen and ( -webkit-min-device-pixel-ratio : 0 )	{
      .class {
    	color : #F00 ;
      }
    }
    /* Хак для Opera и Safari */
     
    gmsum и sqsmike нравится это.
  4. Flexx

    Flexx

    Регистрация:
    8 янв 2013
    Сообщения:
    122
    Симпатии:
    85
    + еще
    Mozilla Firefox. Данный CSS хак работает только для браузеров Mozilla Firefox. Вот его пример:
    p, x:-moz-any-link {
    margin-top: 30px;
    }

    В данном примере сообщается, что стиль к селектору "p" будет применён только для браузеров Mozilla Firefox, а все остальные браузеры данный стиль проигнорируют.
     
  5. Flexx

    Flexx

    Регистрация:
    8 янв 2013
    Сообщения:
    122
    Симпатии:
    85
    IE6 и IE7 не поддерживают inline-block, поэтому с помощью условных комментариев прописываем для них display:inline.

    HTML:
    <!--[if lte IE 7]>
    <style type="text/css">
    ul li {
    display: inline
    }
    </style>
    <![endif]-->
     
  6. Grek

    Grek

    Регистрация:
    18 янв 2013
    Сообщения:
    172
    Симпатии:
    18
    1) Ие 7 - 8 не понимает тегов хтмл 5 (article, video,...), соответственно не видет стилей для этих тегов. Есть хак, который решает проблему - внешний скрипт tml5shiv.
    Код:
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    .
    2) Для адаптивности в ие7 - 8 (понимание Jquery запросов @media) используем скрипт css3-mediaqueries.js. Подробнее:
     
  7. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.349
    Симпатии:
    1.380
    наткнулся на отличный сайт: http://browserhacks.com/
    обладает большой базой хаков под различные браузеры.
     
    Commondore нравится это.
  8. aizekmorozov

    aizekmorozov

    Регистрация:
    1 дек 2013
    Сообщения:
    2
    Симпатии:
    0
    Chrome

    Код:
    .selector { (;property: value;); } .selector { [;property: value;]; }
    Код:
    var isChromium = !!window.chrome;
     
  9. sven111

    sven111

    Регистрация:
    7 июн 2014
    Сообщения:
    1
    Симпатии:
    0
  10. Rauan

    Rauan

    Регистрация:
    18 ноя 2016
    Сообщения:
    2
    Симпатии:
    0
    _background: #F00; /* - Валидатор при проверке может выдать ошибку, не всегда, но может.*/

    не работает же