Застосовуйте стиль ТІЛЬКИ на 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

— FastTrack
джерело

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

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

— Саад Ахмед

6

Дивіться тут, щоб націлити край: stackoverflow.com/questions/28417056/…

— Phyllis Sutherland

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-high-контраст: жоден) {} Це спрацювало чудово.

— Гарсимер

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 http://rafael.adm.br/css_browser_selector/, оскільки це дозволить орієнтуватися на конкретні веб-переглядачі. Потім ви можете встановити CSS як

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

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

— frontendzzzguy
джерело

Це, мабуть, не впливає на IE9

— FastTrack

Я не розумію, чому ні, спробуйте .ie9 .actual-form таблиці {width: 100%} у своєму CSS. Сподіваємось, це працює для вас.

— frontendzzzguy

.ie9не працює, оскільки він не оновлювався з 2010 року.

— Ханна

Це, безумовно, найелегантніший підхід. Особисто я віддаю перевагу додати сторону сервера селекторів браузера при візуалізації сторінки.

— opsb

1

це спрацьовує, якщо ви використовуєте рядки агентів та динамічно додаєте селекторний клас до тіла.

— pikapika

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 */
}

— остегайт
джерело

5

Welcome 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 екран та (-ms-high-контраст: активний), (-ms-high-контраст: жоден) {.color {color: # F00;}} Цей хакер також не використовує дійсний CSS.

— Піклер
джерело

Останній також стосується IE11

— CBarr

2

Для / * Internet Explorer 9+ (однолінійний) * /

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

Тільки це рішення прекрасно працює для мене.

— Рахі.Шах
джерело

Я знаю, що це некромент, але це виглядає надзвичайно струнко. Однак я не впевнений, що саме робить, оскільки це виглядає трохи таємно / візантійсько. Хтось знає семантику цього твердження? (на кшталт _ :: і \ 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; }

— Шрінівасан N
джерело