1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

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

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

  1. alex_storm

    alex_storm webdev

    Регистрация:
    11 дек 2012
    Сообщения:
    1.151
    Симпатии:
    667
    Для 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]-->
     
    alex_storm, 16 янв 2013
    #1
    sorioshi нравится это.
  2. alex_storm

    alex_storm webdev

    Регистрация:
    11 дек 2012
    Сообщения:
    1.151
    Симпатии:
    667
    Для 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]-->
     
    alex_storm, 19 янв 2013
    #2
  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 */
     
    alxndr52, 7 фев 2013
    #3
    gmsum и sqsmike нравится это.
  4. Flexx

    Flexx

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

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

    Flexx

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

    HTML:
    <!--[if lte IE 7]>
<style type="text/css">
ul li {
display: inline
}
</style>
<![endif]-->
     
    Flexx, 11 апр 2013
    #5
  6. Grek

    Grek

    Регистрация:
    18 янв 2013
    Сообщения:
    172
    Симпатии:
    19
    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. Подробнее:
     
    Grek, 1 май 2013
    #6
  7. $iD

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

    Регистрация:
    13 мар 2012
    Сообщения:
    3.581
    Симпатии:
    1.482
    наткнулся на отличный сайт: http://browserhacks.com/
    обладает большой базой хаков под различные браузеры.
     
    $iD, 25 ноя 2013
    #7
    Commondore нравится это.
  8. aizekmorozov

    aizekmorozov

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

    Код:
    .selector { (;property: value;); } .selector { [;property: value;]; }
    Код:
    var isChromium = !!window.chrome;
     
    aizekmorozov, 1 дек 2013
    #8
  9. sven111

    sven111

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

    Rauan

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

    не работает же
     
    Rauan, 19 ноя 2016
    #10
  11. RedWine

    RedWine

    Регистрация:
    30 апр 2020
    Сообщения:
    10
    Симпатии:
    0
    с знаками ,.-_ и т.д. unicode-table в помощь
     
    RedWine, 30 апр 2020
    #11
< Инструменты и сервисы для верстальщика | Правила раздела >