Примените стиль ТОЛЬКО на IE

184

Вот мой блок CSS:

.actual-form table {
  padding: 5px 0 15px 15px;
  margin: 0 0 30px 0;
  display: block;
  width: 100%;
  background: #f9f9f9;
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
}

Я хочу, чтобы IE 7, 8 и 9 "видели" width: 100%

Какой самый простой способ сделать это?

css internet-explorer

— Быстрый трек
источник

1

Почему вы пытаетесь это сделать? На какую версию IE вы ориентируетесь? А как насчет IE10? (не поддерживает обычные условные комментарии)

— тридцатое

Я пытаюсь настроить таргетинг на IE 7, 8 и 9.

— FastTrack

По какой причине вы можете использовать IE9, а не IE10? Я хотел бы знать ...

— тридцать пятого

1

IE не интерпретирует width: autoблочные элементы так же, как другие браузеры, такие как Firefox или Chrome. В Chrome / Firefox width:autoбудет расширена ширина элемента блока на всю ширину его контейнера. IE не делает этого и требуетwidth: 100%

— FastTrack

1

Кто-нибудь пробовал это? philipnewcomer.net/2014/04/target-internet-explorer-10-11-css

— Прамеш Байрачарья

102

Обновление 2017

В зависимости от среды, условные комментарии были официально объявлены устаревшими и удалены в IE10 +.

оригинал

Самый простой способ - использовать условный комментарий Internet Explorer в вашем HTML:

<!--[if IE]>
<style>
    .actual-form table {
         width: 100%;
    }
</style>
<![endif]-->

Вы можете использовать множество хаков (например, хак с подчеркиванием ), которые позволят вам нацеливать только IE в пределах вашей таблицы стилей, но это становится очень грязным, если вы хотите использовать все версии IE на всех платформах.

— Джеймс Аллардис
источник

10

Есть ли способ использовать этот условный комментарий в моем файле CSS? Я хотел избежать загромождения своего HTML, если смогу помочь.

— FastTrack

2

@FastTrack - Нет, условные комментарии - это комментарии HTML, поэтому они должны появляться в вашей разметке. Я склонен создавать целую новую таблицу стилей только для IE, а затем включать ее как обычно в условные комментарии.

— Джеймс Аллардис

Джеймс: Я думал об этом, но потом мне приходится бороться с обновлением двух отдельных таблиц стилей каждый раз, когда я хочу что-то изменить, верно?

— FastTrack

3

@FastTrack - Нет, ваша таблица стилей IE будет содержать только стили, специфичные для IE. Включите его после основной таблицы стилей, чтобы при необходимости вы могли переопределить стили, установленные в основной таблице стилей. Так что вам нужно будет обновить его, только если вы хотите изменить что-то конкретное для IE.

— Джеймс Аллардис

1

@FastTrack - Да. Когда что-то указано в нескольких таблицах стилей, включенная позже имеет приоритет.

— Джеймс Аллардис

284

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #myElement {
        /* Enter your style code */
   }
}

Объяснение: Это специфичный для Microsoft медиа-запрос. Используя свойство -ms-high-контрастности, характерное для Microsoft IE, оно будет проанализировано только в Internet Explorer 10 или более поздней версии. Я использовал оба допустимых значения медиазапроса, поэтому он будет анализироваться только IE, независимо от того, включен ли пользователь с высокой контрастностью или нет.

— Химаншу Двиведи
источник

6

только он не работает на новом интернет-проводнике (край), нужно добавить его тоже без мс

— Саад Ахмед

6

См. Здесь для определения

— Филлис Сазерленд,

6

@SaadAhmed: это на самом деле проблема? Edge - браузер с хорошим поведением, во всяком случае, намного лучше, чем IE, поэтому многие взломы IE, вероятно, не понадобятся (или разумны)?

— Майкл Шепер,

1

Ну, это решило мои глупые проблемы с IE. Спасибо за исправление!

— Шут

1

@MichaelScheper Эта ошибка, опубликованная в первом комментарии, по-прежнему применяется в новейшей версии (на сегодня 17). Небольшое исправление Саада помогло мне устранить эту причуду.

— SimonRabbit

54

Помимо условных комментариев IE, это обновленный список того, как настроить IE6 на IE10.

Смотрите конкретные CSS & JS хаки за пределами IE .

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

/* IE9, IE10, IE11 */
@media screen and (min-width:0\0) {
    #veintidos { color: red}
}


/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE8 (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #veintiun { color: red; }
}

— Ориоль
источник

1

Я попробовал \9и \0/для displayселектора класса, но оба будут применяться к IE10, а также. Есть ли способ подать заявку только на IE9 [и ниже или нет]?

— Том Брито,

Вы можете попробовать: \0/IE9но не проверяли это. В противном случае я не знаю другого способа нацеливания на IE9, если вы не используете условные предложения:

— Oriol

1

@media screen and (min-width:0\0) {Хак , кажется, разбирается IE11, а - так что это не 9 , а 10 только - пожалуйста , перепроверить и обновить свои комментарии.

— Рольф

Я использовал экран @media и (-ms-high-контраст: активный), (-ms-высокий контраст: нет) {} Это работало нормально.

— Harsimer

43

Есть несколько хаков, доступных для IE

Использование условных комментариев с таблицей стилей

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="only-ie.css" />
<![endif]-->

Использование условных комментариев с заголовком css

<!--[if IE]>
<style type="text/css">
    /************ css for all IE browsers ****************/
</style>
<![endif]-->

Использование условных комментариев с элементами HTML

<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->

Использование медиа-запроса

 IE10+
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 selector { property:value; }
 }

 IE6,7,9,10
 @media screen and (min-width: 640px), screen\9 {
 selector { property:value; }
 }

 IE6,7
 @media screen\9 {
  selector { property:value; }
 }

 IE8
 @media \0screen {
  selector { property:value; }
 }

 IE6,7,8
 @media \0screen\,screen\9 {
  selector { property:value; }
 }

 IE9,10
 @media screen and (min-width:0\0){
  selector { property:value; }
 }

— Сантош Халсе
источник

Обратите внимание, что последний из перечисленных ( min-width:0\0) также относится к IE11

— CBarr

26

Помимо условного комментария можно также использовать CSS Browser Selector http://rafael.adm.br/css_browser_selector/, так как это позволит вам ориентироваться на определенные браузеры. Затем вы можете установить свой CSS как

.ie .actual-form table {
    width: 100%
    }

Это также позволит вам настраивать таргетинг на определенные браузеры в основной таблице стилей без условных комментариев.

— frontendzzzguy
источник

Похоже, что это не имеет никакого эффекта в IE9

— FastTrack

Я не понимаю, почему нет, попробуйте .ie9 .actual-form table {width: 100%} в вашем CSS. Надеюсь, это работает для вас.

— frontendzzzguy

.ie9не работает, потому что он не обновлялся с 2010 года.

— Ханна

Это определенно самый элегантный подход. Лично я предпочитаю добавлять браузер css-селекторов на стороне сервера при рендеринге страницы.

— opsb

1

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

— Пикапика

6

Я думаю, для лучшей практики вы должны написать условное утверждение IE внутри <head>тега, внутри которого есть ссылка на вашу специальную таблицу стилей, т.е. Это ДОЛЖНО БЫТЬ после вашей пользовательской ссылки CSS, так что она переопределяет последнюю, у меня небольшой сайт, поэтому я использую один и тот же, т.е. CSS для всех страниц.

<link rel="stylesheet" type="text/css" href="index.css" />
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

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

— серебро
источник

6

Немного опоздал, но это отлично сработало, когда я пытался скрыть фон для IE6 & 7.

.myclass{ 
    background-image: url("images/myimg.png");
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 22px auto;
    padding-left: 48px;
    height: 42px;
    _background-image: none;
    *background-image: none;
}

Я получил этот взлом через: http://briancray.com/posts/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/

#myelement
{
    color: #999; /* shows in all browsers */
    *color: #999; /* notice the * before the property - shows in IE7 and below */
    _color: #999; /* notice the _ before the property - shows in IE6 and below */
}

— osouthgate
источник

5

Добро пожаловать BrowserDetect - потрясающая функция.

<script>
    var BrowserDetect;
    BrowserDetect = {...};//  get BrowserDetect Object from the link referenced in this answer
    BrowserDetect.init();
    // On page load, detect browser (with jQuery or vanilla)
    if (BrowserDetect.browser === 'Explorer') {
      // Add 'ie' class on every element on the page.
      $('*').addClass('ie');
    }
</script>

<!-- ENSURE IE STYLES ARE AVAILABLE -->
<style>
    div.ie {
       // do something special for div on IE browser.
    }
    h1.ie {
     // do something special for h1 on IE browser.
    }
</style>

Object BrowserDetect также предоставляет versionинформацию , чтобы мы могли добавить определенные классы - напр. $('*').addClass('ie9');если(BrowserDetect.version == 9) .

Удачи....

— Акаша
источник

4

Это действительно зависит от версий IE ... Я нашел этот превосходный ресурс, который актуален с IE6-10 :

CSS взломать для Internet Explorer 6

Он называется Star HTML Hack и выглядит следующим образом:

html .color {color: # F00;} Этот хак использует полностью корректный CSS.

CSS взломать для Internet Explorer 7

Это называется Star Plus Hack.

*: first-child + html .color {color: # F00;} Или более короткая версия:

* + html .color {color: # F00;} Как и взломанный HTML-код звезды, здесь используется действительный CSS.

CSS взломать для Internet Explorer 8

@media \ 0screen {.color {color: # F00;}} Этот хак не использует корректный CSS.

CSS взломать для Internet Explorer 9

: root .color {color: # F00 \ 9;} Этот хак также не использует допустимый CSS.

Добавлено 2013.02.04: К сожалению, IE10 понимает этот взлом.

CSS взломать для Internet Explorer 10

@media screen and (-ms-high-контраст: активный), (-ms-high-контраст: нет) {.color {color: # F00;}} Этот хак также не использует допустимый CSS.

— Pykler
источник

Последний также относится к IE11

— CBarr

2

Для / * Internet Explorer 9+ (однострочный) * /

_::selection, .selector { property:value\0; }

Только это решение отлично работает для меня.

— Rahi.Shah
источник

Я знаю, что это некроммент, но это выглядит супер гладко. Тем не менее, я не уверен, что именно он делает, так как выглядит немного загадочно / византийски. Кто-нибудь знает семантику этого утверждения? (как _ :: и \ 0 в конце?)

— Адам Р. Тернер

1

Также применяется правило для Chrome: /

— Trincot

2

<!--[if !IE]><body<![endif]-->
<!--[if IE]><body class="ie"> <![endif]-->

body.ie .actual-form table {
    width: 100%
}

— dxc111
источник

2

Для IE9 +

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
   // IE9+ CSS
   .selector{
      color: red;
   }
}

IE Edge 12+

@supports (-ms-ime-align: auto) {
  .selector {
    color: red;
  }
}

Этот работает на Edge и всех IE

:-ms-lang(x), .selector { color: red; }

— Сринивасан Н
источник