Zastosuj styl TYLKO w IE

184

Oto mój blok 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;
}

Chcę tylko, aby IE 7, 8 i 9 „widział” width: 100%

Jaki jest najprostszy sposób na osiągnięcie tego?

css internet-explorer

— FastTrack
źródło

1

Dlaczego próbujesz to zrobić? Które wersje IE są kierowane? Co z IE10? (nie obsługuje zwykłych komentarzy warunkowych)

— thirtydot

Próbuję celować w IE 7, 8 i 9.

— FastTrack,

Z jakiego powodu możesz kierować reklamy na IE9, ale nie na IE10? Chciałbym wiedzieć ...

— trzydziesty

1

IE nie interpretuje width: autoelementów blokowych w taki sam sposób, jak inne przeglądarki, takie jak Firefox lub Chrome. W Chrome / Firefox width:autozwiększy szerokość elementu bloku o pełną szerokość jego kontenera. IE tego nie robi i wymagawidth: 100%

— FastTrack,

1

Czy ktoś tego próbował? philipnewcomer.net/2014/04/target-internet-explorer-10-11-css

— Pramesh Bajracharya

102

Aktualizacja 2017

W zależności od środowiska komentarze warunkowe zostały oficjalnie nieaktualne i usunięte w IE10 +.

Oryginalny

Najprostszym sposobem jest prawdopodobnie użycie komentarza warunkowego Internet Explorera w kodzie HTML:

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

Istnieje wiele hacków (np. Hack podkreślający ), które pozwolą ci celować tylko w IE w twoim arkuszu stylów, ale robi się bardzo bałagan, jeśli chcesz celować we wszystkie wersje IE na wszystkich platformach.

— James Allardice
źródło

10

Czy jest jakiś sposób na użycie tego komentarza warunkowego w moim pliku CSS? Chciałem uniknąć zaśmiecania kodu HTML, gdybym mógł to pomóc.

— FastTrack,

2

@ FastTrack - Nie, komentarze warunkowe są komentarzami HTML, więc muszą pojawiać się na Twoim znaczniku. Zwykle tworzę zupełnie nowy arkusz stylów tylko dla IE, a następnie włączam go jak zwykle w komentarzach warunkowych.

— James Allardice,

James: Myślałem o zrobieniu tego, ale potem muszę zmagać się z aktualizacją dwóch oddzielnych arkuszy stylów za każdym razem, gdy chcę coś zmienić, prawda?

— FastTrack

3

@ FastTrack - Nie, twój arkusz stylów IE zawierałby tylko style specyficzne dla IE. Dołącz go po głównym arkuszu stylów, aby w razie potrzeby można było przesłonić style ustawione w głównym arkuszu stylów. Musisz go zaktualizować tylko wtedy, gdy chcesz zmienić coś specyficznego dla IE.

— James Allardice

1

@ FastTrack - Tak. Gdy coś jest określone w więcej niż jednym arkuszu stylów, pierwszeństwo ma ten zawarty później.

— James Allardice

284

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

Objaśnienie: Jest to zapytanie dotyczące mediów specyficzne dla Microsoft. Używając właściwości -ms-high-contrast specyficznej dla Microsoft IE, zostanie ona przeanalizowana tylko w przeglądarce Internet Explorer 10 lub nowszej. Użyłem obu prawidłowych wartości zapytania medialnego, więc zostanie ono przeanalizowane tylko przez IE, niezależnie od tego, czy użytkownik ma włączony wysoki kontrast, czy nie.

— Himanshu Dwivedi
źródło

6

tylko to nie działa na nowym Internet Explorerze (Edge), trzeba go dodać bez ms- też

— Saad Ahmed

6

Zobacz tutaj, jak kierować przewagę: stackoverflow.com/questions/28417056/…

— Phyllis Sutherland

6

@ SaadAhmed: Czy to rzeczywiście problem? Edge jest dość dobrze zachowaną przeglądarką, w każdym razie znacznie lepszą niż IE, więc tak wiele hacków w IE prawdopodobnie nie będzie potrzebnych (lub rozważnych)?

— Michael Scheper,

1

Cóż, to rozwiązało moje głupie problemy z IE. Dzięki za poprawkę!

— Jester,

1

@MichaelScheper Ten błąd opublikowany w pierwszym komentarzu nadal obowiązuje w najnowszej wersji (17 na dziś). Mała poprawka Saada pomogła mi usunąć to dziwactwo.

— SimonRabbit

54

Oprócz komentarzy warunkowych IE jest to zaktualizowana lista sposobów kierowania IE6 na IE10.

Zobacz konkretne hacki CSS i JS poza 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; }
}

— Oriol
źródło

1

Ja próbowałem \9i \0/za displaypomocą selektora klasy, ale oba będą miały zastosowanie do IE10 również. Czy istnieje jakikolwiek sposób ubiegania się tylko o IE9 [i poniżej, czy nie]?

— Tom Brito

Możesz spróbować: \0/IE9ale go nie przetestowałem. W przeciwnym razie nie znam innego sposobu na celowanie w IE9, chyba że użyjesz klauzul warunkowych:

— Oriol,

1

@media screen and (min-width:0\0) {Hack wydaje się być analizowany przez IE11, jak również - więc nie jest to tylko 9 i 10 - Dokładnie sprawdź i zaktualizuj swoje komentarze.

— Rolf,

Użyłem ekranu @media i (-ms-high-contrast: active), (-ms-high-contrast: none) {} Działa dobrze.

— Harsimer

43

Dostępne są kilofy hakerskie dla IE

Używanie komentarzy warunkowych z arkuszem stylów

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

Używanie komentarzy warunkowych z nagłówkiem css

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

Używanie komentarzy warunkowych z elementami HTML

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

Korzystanie z zapytania o media

 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; }
 }

— Santosh Khalse
źródło

Zauważ, że ostatni z wymienionych ( min-width:0\0) dotyczy również IE11

— CBarr

26

Oprócz komentarza warunkowego można również użyć CSS Browser Selector http://rafael.adm.br/css_browser_selector/, ponieważ pozwoli to na kierowanie na określone przeglądarki. Następnie możesz ustawić swój CSS jako

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

Umożliwi to również kierowanie na określone przeglądarki w głównym arkuszu stylów bez potrzeby wprowadzania komentarzy warunkowych.

— frontendzzzguy
źródło

Wydaje się, że nie ma to żadnego wpływu na IE9

— FastTrack,

Nie rozumiem, dlaczego nie, spróbuj .ie9 .actual-form table {width: 100%} w swoim CSS. Mam nadzieję, że to Ci odpowiada.

— frontendzzzguy

.ie9nie działa, ponieważ nie był aktualizowany od 2010 r.

— Hanna

To zdecydowanie najbardziej eleganckie podejście. Osobiście wolę dodawać selektory css przeglądarki po stronie serwera podczas renderowania strony.

— opsb

1

działa to, jeśli używasz ciągów agenta i dynamicznie dodajesz klasę selektora do treści.

— pikapika

6

Myślę, że dla najlepszej praktyki powinieneś napisać w <head>tagu instrukcję warunkową IE, która zawiera link do twojego specjalnego arkusza stylów. To MUSI BYĆ po niestandardowego linku css więc zastępuje to drugie, mam małe miejsce, więc korzystać z tego samego tzn css dla wszystkich stron.

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

to różni się od odpowiedzi Jamesa, jak myślę (osobista opinia, ponieważ pracuję z zespołem projektantów i nie chcę, aby dotykały moich plików HTML i coś tam popsuły), nigdy nie należy dołączać stylów do pliku HTML.

— elad srebrny
źródło

6

Trochę za późno na tym, ale to działało idealnie dla mnie, gdy próbowałem ukryć tło dla IE6 i 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;
}

Mam ten hack za pośrednictwem: 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
źródło

5

Welcome BrowserDetect - niesamowita funkcja.

<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 dostarcza także versioninformacji, dzięki czemu możemy dodać konkretne zajęcia - ex. $('*').addClass('ie9');jeśli (BrowserDetect.version == 9).

Powodzenia....

— Akash
źródło

4

To naprawdę zależy od wersji IE ... Znalazłem ten doskonały zasób, który jest aktualny od IE6-10 :

Hack CSS dla Internet Explorera 6

Nazywa się Star Hack HTML i wygląda następująco:

html .color {color: # F00;} Ten hack używa w pełni poprawnego CSS.

Hack CSS dla Internet Explorera 7

Nazywa się to Star Plus Hack.

*: first-child + html .color {color: # F00;} Lub krótsza wersja:

* + html .color {color: # F00;} Podobnie jak star hack HTML, używa prawidłowego CSS.

Hack CSS dla Internet Explorera 8

@media \ 0screen {.color {color: # F00;}} Ten hack nie używa poprawnego CSS.

Hack CSS dla Internet Explorera 9

: root .color {color: # F00 \ 9;} Ten hack również nie używa poprawnego CSS.

Dodano 2013.02.04: Niestety IE10 rozumie ten hack.

Hack CSS dla Internet Explorera 10

@media screen i (-ms-high-contrast: active), (-ms-high-contrast: none) {.color {color: # F00;}} Ten hack również nie używa poprawnego CSS.

— Pykler
źródło

Ostatni dotyczy również IE11

— CBarr

2

Dla / * Internet Explorer 9+ (jeden wiersz) * /

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

Tylko to rozwiązanie idealnie dla mnie działa.

— Rahi.Shah
źródło

Wiem, że to nekrolog, ale wygląda to super gładko. Nie jestem jednak pewien, co dokładnie robi, ponieważ wygląda nieco tajemniczo / bizantyjsko. Czy ktoś zna semantykę tego stwierdzenia? (np. _ :: i \ 0 na końcu?)

— Adam R. Turner,

1

Stosuje również regułę dla Chrome: /

— trincot

2

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

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

— dxc111
źródło

2

Dla 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;
  }
}

Ten działa na Edge i wszystkich IE

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

— Srinivasan N.
źródło