Terapkan gaya SAJA di IE

184

Inilah blok CSS saya:

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

Saya hanya ingin IE 7, 8, dan 9 untuk "melihat" width: 100%

Apa cara paling sederhana untuk mencapai ini?

css internet-explorer FastTrack
sumber

1

Mengapa Anda mencoba melakukan ini? Versi IE apa yang Anda targetkan? Bagaimana dengan IE10? (tidak mendukung komentar bersyarat yang biasa)

fiftydot

Saya mencoba menargetkan IE 7, 8, dan 9.

FastTrack

Apa alasan Anda harus menargetkan IE9 tetapi tidak untuk IE10? Saya ingin tahu ...

tigapuluh tanggal

1

IE tidak mengartikan width: autoelemen blok dengan cara yang sama seperti browser lain seperti Firefox atau Chrome. Di Chrome / Firefox width:autoakan memperpanjang lebar elemen blok, lebar penuh wadahnya. IE tidak melakukan ini dan memerlukanwidth: 100%

FastTrack

1

Adakah yang sudah mencoba ini? philipnewcomer.net/2014/04/target-internet-explorer-10-11-css

Pramesh Bajracharya

102

Perbarui 2017

Bergantung pada lingkungan, komentar bersyarat telah secara resmi ditinggalkan dan dihapus di IE10 +.

Asli

Cara paling sederhana adalah menggunakan komentar bersyarat Internet Explorer di HTML Anda:

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

Ada banyak retasan (mis. Garis bawah hack ) yang dapat Anda gunakan yang memungkinkan Anda hanya menargetkan IE dalam stylesheet Anda, tetapi akan sangat berantakan jika Anda ingin menargetkan semua versi IE di semua platform.

James Allardice
sumber

10

Apakah ada cara untuk menggunakan komentar bersyarat di dalam file CSS saya? Saya ingin menghindari mengacaukan HTML saya jika saya bisa membantu.

FastTrack

2

@FastTrack - Tidak, komentar bersyarat adalah komentar HTML sehingga harus muncul di markup Anda. Saya cenderung membuat seluruh stylesheet baru hanya untuk IE, dan kemudian memasukkannya seperti biasa dalam komentar bersyarat.

James Allardice

James: Saya sedang berpikir untuk melakukan ini, tetapi kemudian saya harus bersaing dengan memperbarui dua stylesheet terpisah setiap kali saya ingin mengubah sesuatu, kan?

FastTrack

3

@ FastTrack - Tidak, stylesheet IE Anda hanya akan berisi gaya khusus untuk IE. Masukkan setelah stylesheet utama Anda sehingga Anda dapat mengesampingkan gaya yang ditetapkan di stylesheet utama Anda jika perlu. Jadi Anda hanya perlu memperbaruinya jika Anda ingin mengubah sesuatu yang spesifik untuk IE.

James Allardice

1

@ FastTrack - Ya. Ketika sesuatu ditentukan dalam lebih dari satu stylesheet, yang dimasukkan nanti diutamakan.

James Allardice

284

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

Penjelasan: Ini adalah kueri media khusus Microsoft. Menggunakan properti -ms-kontras tinggi khusus untuk Microsoft IE, itu hanya akan diuraikan di Internet Explorer 10 atau lebih besar. Saya telah menggunakan kedua nilai valid dari kueri media, sehingga hanya akan diuraikan oleh IE, apakah pengguna memiliki kontras tinggi diaktifkan atau tidak.

Himanshu Dwivedi
sumber

6

hanya itu tidak bekerja pada internet-explorer (edge) baru, perlu menambahkannya tanpa ms- juga

Saad Ahmed

6

Lihat di sini untuk mengetahui target edge: stackoverflow.com/questions/28417056/…

Phyllis Sutherland

6

@ SaadAhmed: Apakah itu benar-benar masalah? Edge adalah peramban yang berperilaku cukup baik, jauh lebih baik daripada IE, jadi banyak peretasan IE mungkin tidak diperlukan (atau lebih bijaksana)?

Michael Scheper

1

Nah itu memecahkan masalah IE bodoh saya. Terima kasih untuk perbaikannya!

Jester

1

@MichaelScheper Bug ini yang diposting di komentar pertama masih berlaku di edge terbaru (17 untuk hari ini). Perbaikan kecil Saad membantu saya menghapus kekhasan ini.

SimonRabbit

54

Terlepas dari komentar bersyarat IE, ini adalah daftar terbaru tentang bagaimana menargetkan IE6 ke IE10.

Lihat peretasan CSS & JS tertentu di luar 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
sumber

1

Saya sudah mencoba \9dan \0/untuk displaypemilih kelas, tetapi keduanya akan berlaku untuk IE10 juga. Apakah ada cara untuk menerapkan hanya untuk IE9 [dan di bawah atau tidak]?

Tom Brito

Anda dapat mencoba: \0/IE9tetapi belum mengujinya. Kalau tidak, saya tidak tahu cara lain untuk menargetkan IE9 kecuali jika Anda menggunakan klausa bersyarat:

Oriol

1

Itu @media screen and (min-width:0\0) { hack tampaknya diurai oleh IE11 juga - sehingga tidak 9 dan 10 hanya - silahkan periksa dan memperbarui komentar Anda.

Rolf

Saya menggunakan layar @media dan (-ms-high-contrast: active), (-ms-high-contrast: none) {} Ini bekerja dengan baik.

Harsimer

43

Ada beberapa hack yang tersedia untuk IE

Menggunakan komentar bersyarat dengan stylesheet

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

Menggunakan komentar bersyarat dengan css bagian kepala

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

Menggunakan komentar bersyarat dengan elemen HTML

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

Menggunakan kueri 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
sumber

Perhatikan bahwa yang terakhir terdaftar ( min-width:0\0) juga berlaku untuk

IE11

26

Serta komentar kondisional juga dapat menggunakan Pemilih Peramban CSS http://rafael.adm.br/css_browser_selector/ karena ini akan memungkinkan Anda untuk menargetkan browser tertentu. Anda kemudian dapat mengatur CSS Anda sebagai

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

Ini juga akan memungkinkan Anda untuk menargetkan browser tertentu di dalam stylesheet utama Anda tanpa perlu komentar kondisional.

frontendzzzguy
sumber

Ini sepertinya tidak berpengaruh di IE9

FastTrack

Saya tidak mengerti mengapa tidak, coba .ie9 .tabel form-form {width: 100%} di CSS Anda. Semoga itu berhasil untuk Anda.

frontendzzzguy

.ie9tidak berfungsi karena belum diperbarui sejak 2010.

Hanna

Ini jelas merupakan pendekatan yang paling elegan. Secara pribadi saya lebih suka menambahkan sisi server penyeleksi css browser saat merender halaman.

opsb

1

ini berfungsi jika Anda menggunakan string agen dan secara dinamis menambahkan kelas pemilih ke tubuh.

pikapika

6

Saya pikir untuk praktik terbaik Anda harus menulis pernyataan bersyarat IE di dalam <head>tag yang di dalamnya memiliki tautan ke style sheet spesial Anda. Ini HARUS MENJADI setelah tautan css khusus Anda sehingga menimpa yang terakhir, saya punya situs kecil jadi saya menggunakan css yaitu sama untuk semua halaman.

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

ini berbeda dari james jawab seperti yang saya pikirkan (pendapat pribadi karena saya bekerja dengan tim desainer dan saya tidak ingin mereka menyentuh file html saya dan mengacaukan sesuatu di sana) Anda tidak boleh memasukkan gaya dalam file html Anda.

elad perak
sumber

6

Agak terlambat untuk yang satu ini tetapi ini bekerja dengan sempurna untuk saya ketika mencoba menyembunyikan latar belakang untuk 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;
}

Saya mendapatkan hack ini melalui: 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
sumber

5

Selamat datang di BrowserDetect - fungsi yang luar biasa.

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

The Object BrowserDetect juga menyediakan versioninformasi sehingga kita dapat menambahkan kelas khusus - untuk mantan. $('*').addClass('ie9');jika(BrowserDetect.version == 9) .

Semoga berhasil....

Akash
sumber

4

Itu benar-benar tergantung pada versi IE ... Saya menemukan sumber yang bagus ini yang terkini dari IE6-10 :

Retas CSS untuk Internet Explorer 6

Ini disebut Star HTML Hack dan terlihat sebagai berikut:

html .color {color: # F00;} Peretasan ini menggunakan CSS yang sepenuhnya valid.

Retas CSS untuk Internet Explorer 7

Ini disebut Hack Star Plus.

*: first-child + html .color {color: # F00;} Atau versi yang lebih pendek:

* + html .color {color: # F00;} Seperti hack bintang HTML, ini menggunakan CSS yang valid.

Retas CSS untuk Internet Explorer 8

@media \ 0screen {.color {color: # F00;}} Peretasan ini tidak menggunakan CSS yang valid.

Retas CSS untuk Internet Explorer 9

: root .color {color: # F00 \ 9;} Peretasan ini juga tidak menggunakan CSS yang valid.

Ditambahkan 2013.02.04: Sayangnya IE10 memahami hack ini.

Retas CSS untuk Internet Explorer 10

Layar @media dan (-ms-high-contrast: active), (-ms-high-contrast: none) {.color {color: # F00;}} Peretasan ini juga tidak menggunakan CSS yang valid.

Pykler
sumber

Yang terakhir juga berlaku untuk

IE11

2

Untuk / * Internet Explorer 9+ (satu-liner) * /

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

Hanya solusi ini yang cocok untuk saya.

Rahi.Shah
sumber

Saya tahu ini adalah necrocomment, tetapi ini terlihat sangat apik. Namun, saya tidak yakin apa sebenarnya yang dilakukannya karena terlihat agak misterius / Bizantium. Adakah yang tahu semantik pernyataan ini? (seperti _ :: dan \ 0 di akhir?)

Adam R. Turner

1

Juga berlaku aturan untuk Chrome: /

trincot

2

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

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

dxc111
sumber

2

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

Yang ini bekerja pada Edge dan semua IEs

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

Srinivasan N
sumber

Terapkan gaya SAJA di IE

Jawaban:

Selamat datang di BrowserDetect - fungsi yang luar biasa.