Применить стиль только на IE

Question

Применить стиль только на IE

вот мой блок 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%

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

819 11

css internet-explorer

11 ответов:

Comments

Ничего не найдено.

James Allardice · Accepted Answer · 2017-11-16 01:48:27

обновление 2017

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

Оригинал

самый простой способ, вероятно, чтобы использовать Internet Explorer условный комментарий в HTML:

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

Himanshu Dwivedi · Accepted Answer · 2016-04-06 15:47:45

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #myElement {
        /* Enter your style code */
   }
}
пояснение: это запрос на носитель, специфичный для Microsoft. Используя свойство-ms-high-contrast, специфичное для Microsoft IE, оно будет анализироваться только в Internet Explorer 10 или выше. Я использовал оба допустимых значения медиа-запроса, поэтому он будет анализироваться только IE, независимо от того, включен ли у пользователя высокий контраст или нет.

Oriol · Accepted Answer · 2016-08-16 16:40:03

помимо условных комментариев 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; }

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

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

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

/* IE9, IE10 */
@media screen and (min-width: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; }
}

frontendzzzguy · Accepted Answer · 2012-06-24 00:30:16

а также условный комментарий может также использовать селектор браузера CSShttp://rafael.adm.br/css_browser_selector/ так как это позволит вам ориентироваться на конкретные браузеры. Затем вы можете установить CSS как
.ie .actual-form table {
    width: 100%
    }
Это также позволит вам ориентироваться на определенные браузеры в вашей основной таблице стилей без необходимости в условных комментариях.

Santosh Khalse · Accepted Answer · 2017-01-18 10:13:47

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

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

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

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

С помощью медиа-запросов
 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 {
 selector { property:value; }
 }

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

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

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

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

elad silver · Accepted Answer · 2013-07-09 10:48:58

Я думаю, что для лучшей практики вы должны написать условный оператор IE внутри <head> тег это внутри имеет ссылку на вашу специальную таблицу стилей ie. Это ДОЛЖНО БЫТЬ после вашей пользовательской ссылки css, поэтому она переопределяет последнюю, У меня есть небольшой сайт, поэтому я использую один и тот же IE css для всех страниц.
<link rel="stylesheet" type="text/css" href="index.css" />

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

osouthgate · Accepted Answer · 2013-08-19 12:15:02

немного поздно на этом, но это отлично работало для меня при попытке скрыть фон для 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 */
}

Pykler · Accepted Answer · 2014-11-13 17:33:27

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

CSS hack для Internet Explorer 6

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

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

CSS hack для Internet Explorer 7

Это называется Звезда плюс Хак.

*: первый ребенок + html .цвета {цвет: #также F00;} Или более короткая версия:

*+html .цвета {цвет: #также F00;} Как и star HTML hack, это использует действительный CSS.

CSS hack для Internet Explorer 8

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

CSS hack для Internet Explorer 9

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

добавлено 2013.02.04: к сожалению IE10 понимает этот хак.

CSS hack для Internet Explorer 10

экран@Media и (-МС-высокая контрастность: активный), (-МС-высокая контрастность: нет) { .цвета {цвет: #также F00;} } Этот хаки также не использует допустимый CSS.

Rahi.Shah · Accepted Answer · 2017-10-26 16:21:27

для / * Internet Explorer 9+ (однострочный)*/
_::selection, .selector { property:value; }
только это решение прекрасно работает для меня.

Akash · Accepted Answer · 2018-03-13 10:00:17

Добро пожаловать 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>


<style>
    div.ie {
       // do something special for div on IE browser.
    }
    h1.ie {
     // do something special for h1 on IE browser.
    }
</style>
The ObjectBrowserDetect предоставляет version информация, поэтому мы можем добавить определенные классы-например. $('*').addClass('ie9'); Если (BrowserDetect.version == 9).

Удачи....

dxc111 · Accepted Answer · 2018-05-02 09:07:14

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

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