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

Zastosuj styl TYLKO w IE

Odpowiedzi:

Welcome BrowserDetect - niesamowita funkcja.