SADECE IE'de stil uygula

184

İşte benim CSS bloğum:

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

Sadece IE 7, 8 ve 9'un "görmesini" istiyorum width: 100%

Bunu başarmanın en basit yolu nedir?

css internet-explorer

— Hızlı parça
kaynak

1

Bunu neden yapmaya çalışıyorsun? Hangi IE sürümlerini hedefliyorsunuz? IE10 ne olacak? (normal koşullu yorumları desteklemez)

— thirtydot

IE 7, 8 ve 9'u hedeflemeye çalışıyorum

— FastTrack

IE10'u hedeflemek için IE9'u hedeflemenizin ne nedeni olabilir ? Bilmek isterim ...

— thirtydot

1

IE, width: autoblok öğeleri için Firefox veya Chrome gibi diğer tarayıcılarda olduğu gibi yorumlamaz . Chrome / Firefox'ta width:autobir blok öğesinin genişliğini kabının tam genişliğine genişletir. IE bunu yapmaz ve gerektirirwidth: 100%

— FastTrack

1

Bunu deneyen var mı? philipnewcomer.net/2014/04/target-internet-explorer-10-11-css

— Pramesh Bajracharya

102

2017 Güncellemesi

Çevreye bağlı olarak, IE10 + 'da koşullu yorumlar resmi olarak kullanımdan kaldırılmış ve kaldırılmıştır .

orijinal

En basit yol muhtemelen HTML'nizde bir Internet Explorer koşullu yorumu kullanmaktır :

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

Stil sayfanızda yalnızca IE'yi hedefleyebileceğiniz sayısız hack (örn. Alt çizgi hack ) vardır, ancak tüm platformlarda IE'nin tüm sürümlerini hedeflemek istiyorsanız çok dağınık olur.

— James Allardice
kaynak

10

Bu koşullu yorumu CSS dosyamda kullanmanın bir yolu var mı? Yardım edebilseydim HTML'imi karıştırmaktan kaçınmak istedim.

— FastTrack

2

@FastTrack - Hayır, koşullu yorumlar HTML yorumudur, bu nedenle işaretlemenizde görünmeleri gerekir. Sadece IE için tamamen yeni bir stil sayfası oluşturma eğilimindeyim ve ardından koşullu yorumlara normal olarak dahil ediyorum.

— James Allardice

James: Bunu yapmayı düşünüyordum, ama sonra her şeyi değiştirmek istediğimde iki ayrı stil sayfasını güncellemem gerekiyor, değil mi?

— FastTrack

3

@FastTrack - Hayır, IE stil sayfanız yalnızca IE'ye özgü stilleri içerir. Gerektiğinde ana stil sayfanızda ayarlanan stilleri geçersiz kılabilmek için ana stil sayfanızdan sonra ekleyin. Bu nedenle, yalnızca IE'ye özgü bir şey değiştirmek istiyorsanız güncellemeniz gerekir.

— James Allardice

1

@FastTrack - Evet. Birden fazla stil sayfasında bir şey belirtildiğinde, daha sonra dahil edilenler önceliklidir.

— James Allardice

284

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

Açıklama: Microsoft'a özgü bir medya sorgusudur. Microsoft IE'ye özgü -ms-yüksek karşıtlık özelliğini kullanarak, yalnızca Internet Explorer 10 veya daha üst sürümlerinde ayrıştırılır. Medya sorgusunun geçerli değerlerinin her ikisini de kullandım, bu yüzden kullanıcı yüksek kontrastı etkin olsun ya da olmasın, yalnızca IE tarafından ayrıştırılacaktır.

— Himanshu Dwivedi
kaynak

6

sadece yeni internet explorer (edge) üzerinde çalışmaz, ms olmadan da eklemeniz gerekir

— Saad Ahmed

6

Hedefleme kenarı için buraya bakın: stackoverflow.com/questions/28417056/…

— Phyllis Sutherland

6

@SaadAhmed: Bu gerçekten bir sorun mu? Edge, oldukça iyi davranılmış bir tarayıcıdır, IE'den çok daha iyidir, bu yüzden birçok IE korsanlığı muhtemelen gerekli değildir (veya ihtiyatlı)?

— Michael Scheper

1

Peki bu benim aptal IE sorunları çözdü. Düzeltme için teşekkürler!

— Jester

1

@MichaelScheper İlk yorumda yayınlanan bu hata hala en yeni kenarda (bugün için 17) geçerlidir. Saad'ın küçük düzeltmesi bu tuhaflığı kaldırmama yardımcı oldu.

— SimonRabbit

54

IE koşullu yorumlarının yanı sıra, IE6'nın IE10'a nasıl hedefleneceğine dair güncellenmiş bir listedir.

IE'nin ötesindeki belirli CSS ve JS saldırılarına bakın .

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

1

Denedim ediyorum \9ve \0/için displaybir sınıf seçicisi üzerinde, ancak her iki sıra IE10 için geçerli olacaktır. Sadece IE9 [ve altı ya da değil] için başvurmanın bir yolu var mı?

— Tom Brito

Deneyebilirsiniz: \0/IE9ancak test etmediniz. Aksi takdirde, koşullu hükümler kullanmadığınız sürece IE9'u hedeflemenin başka bir yolunu bilmiyorum:

— Oriol

1

@media screen and (min-width:0\0) {Kesmek yanı IE11 tarafından ayrıştırılır gibi görünüyor - bir kez daha kontrol memnun ve yorumlarınızı güncellemek - bu sadece 9 ve 10 yani.

— Rolf

@Media ekranını kullandım ve (-ms-high-contrast: active), (-ms-high-contrast: none) {} İyi çalıştı.

— Harsimer

43

IE için birkaç tane hack vardır

Stil sayfasıyla koşullu yorumları kullanma

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

Css başlık bölümü ile koşullu yorumları kullanma

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

HTML öğelerinde koşullu yorumları kullanma

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

Medya sorgusunu kullanma

 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
kaynak

Listelenen min-width:0\0sonuncunun ( ) IE11

— CBarr

26

Koşullu bir yorumun yanı sıra, belirli tarayıcıları hedeflemenize izin vereceği için http://rafael.adm.br/css_browser_selector/ CSS Tarayıcı Seçicisini de kullanabilirsiniz . Daha sonra CSS'nizi şu şekilde ayarlayabilirsiniz:

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

Bu, koşullu yorumlara gerek kalmadan ana stil sayfanızdaki belirli tarayıcıları hedeflemenize de olanak tanır.

— frontendzzzguy
kaynak

Bunun IE9'da bir etkisi yok gibi görünüyor

— FastTrack

Neden olmasın, CSS'nizde .ie9 .actual-form table {width: 100%} 'ı deneyin. Umarım bu sizin için çalışır.

— frontendzzzguy

.ie92010'dan beri güncellenmediği için çalışmıyor.

— Hanna

Bu kesinlikle en zarif yaklaşım. Şahsen ben sayfa oluştururken tarayıcı css seçicileri sunucu tarafı eklemeyi tercih ederim.

— opsb

1

aracı dizeleri kullanırsanız ve seçici sınıfı gövdeye eklerseniz bu çalışır.

— 16:53

6

Ben en iyi uygulama için <head>içinde özel yani stil sayfası bir bağlantı olduğunu etiketi içinde IE koşullu ifade yazmalısınız düşünüyorum . Bu özel css bağlantı sonra ikincisi geçersiz kılar sonra OLMALIDIR , ben tüm sayfalar için aynı yani css böylece küçük bir site var.

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

Bu (ben bir tasarımcı ekibi ile çalışmak ve onları benim html dosyaları dokunmak ve orada bir şey berbat istemiyorum çünkü kişisel görüş çünkü james cevap) farklı html dosyasına stilleri içermemelidir.

— gümüş
kaynak

6

Bu biraz geç ama bu IE6 ve 7 için arka plan gizlemeye çalışırken benim için mükemmel çalıştı

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

Bu hack'i http://briancray.com/posts/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/ adresinden aldım.

#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
kaynak

5

Hoşgeldin BrowserDetect - harika bir işlev.

<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 da sağlar versionex - biz belirli sınıfları ekleyebilirsiniz böylece bilgi. $('*').addClass('ie9');eğer (BrowserDetect.version == 9).

İyi şanslar....

— Akash
kaynak

4

Gerçekten IE sürümlerine bağlıdır ... IE6-10 bugüne kadar bu mükemmel kaynak bulundu :

Internet Explorer 6 için CSS kesmek

Yıldız HTML Hack denir ve aşağıdaki gibi görünür:

html .color {color: # F00;} Bu kesmek tamamen geçerli CSS kullanıyor.

Internet Explorer 7 için CSS kesmek

Buna Star Plus Hack denir.

*: first-child + html .color {color: # F00;} Veya daha kısa bir sürüm:

* + html .color {color: # F00;} Yıldız HTML kesmek gibi, bu da geçerli CSS kullanır.

Internet Explorer 8 için CSS kesmek

@media \ 0screen {.color {color: # F00;}} Bu saldırılar geçerli CSS kullanmıyor.

Internet Explorer 9 için CSS kesmek

: root .color {color: # F00 \ 9;} Bu bilgisayar korsanları da geçerli CSS kullanmaz.

2013.02.04 eklendi: Ne yazık ki IE10 bu kesmek anlıyor.

Internet Explorer 10 için CSS kesmek

@media ekranı ve (-ms-high-contrast: active), (-ms-high-contrast: none) {.color {color: # F00;}} Bu bilgisayar korsanları da geçerli CSS kullanmaz.

— Pykler
kaynak

Sonuncusu IE11

— CBarr

2

/ * Internet Explorer 9+ (tek katmanlı) * /

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

Sadece bu çözüm benim için mükemmel.

— Rahi.Shah
kaynak

Bu bir necrocomment olduğunu biliyorum, ama bu süper kaygan görünüyor. Ancak, biraz arcane / bizans gibi göründüğü gibi tam olarak ne yaptığından emin değilim. Bu ifadenin anlambilimini bilen var mı? (_ :: ve sondaki \ 0 gibi mi?)

— Adam R. Turner

1

Ayrıca Chrome için de geçerlidir: /

— trincot

2

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

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

— dxc111
kaynak

2

IE9 + için

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

Bu Edge ve tüm IE'lerde çalışır

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

— Srinivasan N
kaynak