ใช้สไตล์เฉพาะบน IE

184

นี่คือบล็อก 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%

วิธีที่ง่ายที่สุดในการทำสิ่งนี้ให้สำเร็จคืออะไร?

css  internet-explorer 
— FastTrack
แหล่งที่มา
1
ทำไมคุณถึงพยายามทำเช่นนี้? คุณกำลังกำหนดเป้าหมายเวอร์ชันใดของ IE แล้ว IE10 ล่ะ? (ไม่สนับสนุนความคิดเห็นตามเงื่อนไขปกติ)
— 30
ฉันกำลังพยายามกำหนดเป้าหมาย IE 7, 8 และ 9
— FastTrack
คุณมีเหตุผลอะไรที่ต้องตั้งเป้าหมาย IE9 แต่ไม่ใช่ IE10 ฉันชอบที่จะรู้ว่า ...
— thirtydot
1
IE ไม่ได้แปลความหมายwidth: autoสำหรับองค์ประกอบบล็อกในลักษณะเดียวกับเบราว์เซอร์อื่น ๆ เช่น Firefox หรือ Chrome ใน Chrome / Firefox width:autoจะขยายความกว้างขององค์ประกอบบล็อกให้เต็มความกว้างของคอนเทนเนอร์ IE ไม่ทำเช่นนี้และต้องใช้width: 100%
— FastTrack
1
มีใครลองบ้างไหม philipnewcomer.net/2014/04/target-internet-explorer-10-11-css
— Pramesh Bajracharya

คำตอบ:

102

อัปเดต 2017

ความคิดเห็นตามเงื่อนไขได้ถูกคัดค้านและถูกลบอย่างเป็นทางการใน IE10 + ขึ้นอยู่กับสภาพแวดล้อม

เป็นต้นฉบับ

วิธีที่ง่ายที่สุดคือการใช้ความคิดเห็นตามเงื่อนไขของ Internet Explorerใน HTML ของคุณ:

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

มีแฮ็กจำนวนมาก (เช่นการขีดเส้นใต้แฮ็ค ) ที่คุณสามารถใช้ซึ่งจะช่วยให้คุณกำหนดเป้าหมายเฉพาะ IE ภายในสไตล์ชีตของคุณ แต่มันจะยุ่งมากหากคุณต้องการกำหนดเป้าหมาย IE ทุกเวอร์ชันบนแพลตฟอร์มทั้งหมด

— James Allardice
แหล่งที่มา
10
มีวิธีใช้ความคิดเห็นตามเงื่อนไขนั้นในไฟล์ CSS ของฉันหรือไม่? ฉันต้องการหลีกเลี่ยงการทำให้ HTML ยุ่งเหยิงหากฉันสามารถช่วยได้
— FastTrack
2
@FastTrack - ไม่ความคิดเห็นตามเงื่อนไขคือความคิดเห็น HTML ดังนั้นจะต้องปรากฏในมาร์กอัปของคุณ ฉันมักจะสร้างสไตล์ชีทใหม่ทั้งหมดสำหรับ IE แล้วรวมไว้เป็นความคิดเห็นตามเงื่อนไข
— James Allardice
James: ฉันกำลังคิดที่จะทำสิ่งนี้ แต่แล้วฉันต้องต่อสู้กับการปรับปรุงสไตล์สองสไตล์ที่แตกต่างกันทุกครั้งที่ฉันต้องการเปลี่ยนอะไรบางอย่างใช่มั้ย
— FastTrack
3
@FastTrack - ไม่สไตล์ชีท IE ของคุณจะมีสไตล์เฉพาะกับ IE เท่านั้น รวมไว้หลังสไตล์ชีทหลักของคุณเพื่อให้คุณสามารถแทนที่สไตล์ที่กำหนดไว้ในสไตล์ชีทหลักของคุณในกรณีที่จำเป็น ดังนั้นคุณจะต้องอัปเดตหากคุณต้องการเปลี่ยนสิ่งที่เฉพาะเจาะจงกับ IE
— James Allardice
1
@FastTrack - ใช่ เมื่อมีการระบุบางสิ่งในสไตล์ชีทมากกว่าหนึ่งรายการสิ่งที่รวมในภายหลังจะมีความสำคัญกว่า
— James Allardice
284 
@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 เท่านั้นไม่ว่าผู้ใช้จะเปิดใช้งานคอนทราสต์สูงหรือไม่

— Himanshu Dwivedi
แหล่งที่มา
6
เพียง แต่มันไม่ทำงานบนอินเทอร์เน็ตใหม่ Explorer (ขอบ) ความต้องการที่จะเพิ่มได้โดยไม่ต้อง MS- เกินไป
— ซาดอาเหม็ด
6
ดูที่นี่สำหรับขอบการกำหนดเป้าหมาย: stackoverflow.com/questions/28417056/…
— Phyllis Sutherland
6
@SaadAhmed: นั่นเป็นปัญหาจริงเหรอ? Edge เป็นเบราว์เซอร์ที่ทำงานได้ดีมากดีกว่า IE แต่อย่างใดดังนั้นแฮ็ก IE จำนวนมากอาจไม่จำเป็น (หรือรอบคอบ)?
— Michael Scheper
1
ดีที่แก้ไขปัญหา IE โง่ของฉัน ขอบคุณสำหรับการแก้ไข!
— ตลก
1
@MichaelScheper ข้อผิดพลาดนี้โพสต์ในความคิดเห็นแรกยังคงใช้ในขอบใหม่ล่าสุด (17 วันนี้) การแก้ไขเล็กน้อยของ Saad ช่วยให้ฉันลบสิ่งที่น่าสนใจนี้ออก
— SimonRabbit
54

นอกเหนือจากความคิดเห็นตามเงื่อนไขของ IE นี่คือรายการที่อัปเดตเกี่ยวกับวิธีกำหนดเป้าหมาย IE6 ไปยัง IE10

ดูเฉพาะ CSS และ JS hacks เกิน 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
แหล่งที่มา
1
ฉันพยายาม\9แล้ว\0/สำหรับdisplayตัวเลือกคลาส แต่ทั้งคู่จะใช้กับ IE10 เช่นกัน มีวิธีใดที่จะใช้เฉพาะกับ IE9 [และต่ำกว่าหรือไม่]?
— Tom Brito
คุณสามารถลอง: \0/IE9แต่ยังไม่ได้ทดสอบ มิฉะนั้นผมไม่ทราบว่ามีวิธีอื่น ๆ ในการกำหนดเป้าหมาย IE9 เว้นแต่คุณจะใช้คำสั่งเงื่อนไข:<!--[if IE 9]><link rel="stylesheet" type="text/css" href="ie9-specific.css" /><![endif]-->
— Oriol
1
@media screen and (min-width:0\0) {สับดูเหมือนว่าจะแยกวิเคราะห์โดย IE11 เป็นอย่างดี - ดังนั้นจึงไม่ 9 และ 10 เท่านั้น - กรุณาตรวจสอบและปรับปรุงความคิดเห็นของคุณ
— Rolf
ฉันใช้หน้าจอ @media และ (-ms-high-contrast: active), (-ms-high-contrast: none) {} มันใช้งานได้ดี
— Harsimer
43

มีการแฮ็กข้อมูลสำรองสำหรับIE

ใช้ความคิดเห็นตามเงื่อนไขกับสไตล์ชีท

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

ใช้ความคิดเห็นตามเงื่อนไขกับส่วนหัว CSS

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

ใช้ความคิดเห็นตามเงื่อนไขกับองค์ประกอบ HTML

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

ใช้แบบสอบถามสื่อ

 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
แหล่งที่มา
โปรดทราบว่ารายการสุดท้าย ( min-width:0\0) ยังใช้กับ IE11
— CBarr
26

ความคิดเห็นแบบมีเงื่อนไขยังสามารถใช้ตัวเลือกเบราว์เซอร์ CSS http://rafael.adm.br/css_browser_selector/เพื่อให้คุณสามารถกำหนดเป้าหมายเบราว์เซอร์ที่ต้องการได้ จากนั้นคุณสามารถตั้งค่า CSS เป็น

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

วิธีนี้จะช่วยให้คุณสามารถกำหนดเป้าหมายเบราว์เซอร์เฉพาะภายในสไตล์ชีทหลักของคุณโดยไม่จำเป็นต้องแสดงความคิดเห็นแบบมีเงื่อนไข

— frontendzzzguy
แหล่งที่มา
ดูเหมือนว่าจะไม่มีผลกระทบใด ๆ ใน IE9
— FastTrack
ฉันไม่เห็นสาเหตุใดลอง. .9 ตารางแบบฟอร์มจริง {width: 100%} ใน CSS ของคุณ หวังว่าจะเหมาะกับคุณ
— frontendzzzguy
.ie9ไม่ทำงานเนื่องจากไม่ได้อัปเดตตั้งแต่ปี 2010
— Hanna
นี่เป็นวิธีที่เยี่ยมยอดที่สุด ส่วนตัวฉันต้องการเพิ่มเบราว์เซอร์ css selectors ฝั่งเซิร์ฟเวอร์เมื่อแสดงหน้า
— opsb
1
ใช้งานได้หากคุณใช้สตริงตัวแทนและเพิ่มคลาสตัวเลือกให้กับเนื้อหา
— pikapika
6

ฉันคิดว่าวิธีปฏิบัติที่ดีที่สุดคุณควรเขียนคำสั่งแบบมีเงื่อนไข IE ภายใน<head>แท็กที่ด้านในมีลิงก์ไปยังสไตล์ชีทพิเศษ นี้จะต้องมีหลังจากการเชื่อมโยง CSS ที่กำหนดเองของคุณจึงจะลบล้างหลังผมมีเว็บไซต์ที่มีขนาดเล็กเพื่อใช้ i เดียวกันเช่น CSS สำหรับทุกหน้า

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

สิ่งนี้แตกต่างจากคำตอบของเจมส์ที่ฉันคิด (ความเห็นส่วนตัวเพราะฉันทำงานกับทีมนักออกแบบและฉันไม่ต้องการให้พวกเขาแตะไฟล์ html ของฉันและทำอะไรบางอย่างที่นั่น) คุณไม่ควรใส่สไตล์ในไฟล์ html ของคุณ

— เงิน elad
แหล่งที่มา
6

ช้าไปหน่อยสำหรับอันนี้ แต่มันใช้งานได้อย่างสมบูรณ์แบบสำหรับฉันเมื่อพยายามซ่อนพื้นหลังสำหรับ 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 */
}
— osouthgate
แหล่งที่มา
5

ยินดีต้อนรับ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>

<!-- 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ยังให้versionข้อมูลเพื่อให้เราสามารถเพิ่มชั้นเรียนเฉพาะ - อดีต ถ้า$('*').addClass('ie9');(BrowserDetect.version == 9)

โชคดี....

— Akash
แหล่งที่มา
4

มันขึ้นอยู่กับรุ่นของ IE ... ฉันพบทรัพยากรที่ยอดเยี่ยมนี้ซึ่งเป็นข้อมูลล่าสุดจาก IE6-10 :

CSS hack สำหรับ Internet Explorer 6

มันถูกเรียกว่า Star HTML Hack และมีลักษณะดังนี้:

  • html .color {color: # F00;} แฮ็คนี้ใช้ CSS ที่ใช้ได้จริง

CSS hack สำหรับ Internet Explorer 7

มันถูกเรียกว่า Star Plus Hack

*: ลูกคนแรก + html .color {color: # F00;} หรือรุ่นที่สั้นกว่า:

* + html .color {color: # F00;} เช่นเดียวกับการแฮ็ค HTML ระดับดาวสิ่งนี้ใช้ CSS ที่ถูกต้อง

CSS hack สำหรับ Internet Explorer 8

@media \ 0screen {.color {color: # F00;}} แฮ็กนี้ไม่ได้ใช้ CSS ที่ถูกต้อง

CSS hack สำหรับ Internet Explorer 9

: root .color {color: # F00 \ 9;} แฮ็กนี้ไม่ได้ใช้ CSS ที่ถูกต้อง

เพิ่ม 2013.02.04: น่าเสียดายที่ IE10 เข้าใจแฮ็คนี้

CSS hack สำหรับ Internet Explorer 10

หน้าจอ @ สื่อและ (-ms-high-contrast: active), (-ms-high-contrast: none) {.color {color: # F00;}} แฮ็กนี้ยังไม่ใช้ CSS ที่ถูกต้อง

— Pykler
แหล่งที่มา
อันสุดท้ายใช้กับ IE11
— CBarr
2

สำหรับ / * Internet Explorer 9+ (หนึ่งซับ) * /

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

วิธีนี้ใช้ได้ผลสำหรับฉันเท่านั้น

— Rahi.Shah
แหล่งที่มา
ฉันรู้ว่านี่เป็นสิ่งที่ไม่ควรพลาด แต่มันก็ดูดีมาก อย่างไรก็ตามฉันไม่แน่ใจว่ามันกำลังทำอะไรอยู่เพราะมันดูลึกลับเล็กน้อย / ไบเซนไทน์ ใครทราบความหมายของคำนี้ (เช่น _ :: และ \ 0 ในตอนท้าย?)
— Adam R. Turner
1
นอกจากนี้ยังใช้กฎสำหรับ Chrome: /
— trincot
2

สำหรับ 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;
  }
}

อันนี้ใช้ได้กับ Edge และ IEs ทั้งหมด

:-ms-lang(x), .selector { color: red; }
— ศรีนิศานันท์
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.