<! - [ถ้า! IE]> ไม่ทำงาน


139

ฉันมีปัญหาในการรับ

<!--[if !IE]>

ไปทำงาน. ฉันสงสัยว่าเป็นเพราะฉันมีสิ่งนี้ในเอกสารของฉันหรือไม่

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->

เมื่อฉันเพิ่ม

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

ในส่วนหัวของฉันด้วยเหตุผลบางอย่างมันไม่ทำงาน อย่างไรก็ตามถ้าฉันเพิ่ม

<!--[if !IE]><!-->
    <style>
        All my css in here
    </style>
    <!--<![endif]-->

ไปที่หน้า html จริง (ในส่วนหัว) ใช้งานได้ ข้อเสนอแนะใด ๆ ไชโย

อัปเดตเป็นคำถามของฉัน

ตกลงเมื่อฉันลบ <!-->ฉันเพียงตรวจสอบใน IE ซึ่งทำงาน แต่ตอนนี้กลับมาใน FF no-ie.css ถูกนำไปใช้กับ FF เกินไป ดังนั้นฉันจึงเพิ่มกลับเข้าไปใน<!-->และลบ / (และเพิ่มเข้าไปในเทมเพลตหลักดังนั้น cms จะไม่เพิ่มกลับเข้าไป) และทั้งหมดกลับมาทำงานใน FF แต่ตอนนี้สไตล์ชีทถูกนำไปใช้กับ IE! ดังนั้นฉันจึงพยายาม

<!--[if IE]>
<link type="text/css" rel="stylesheet" href="https://stackoverflow.com/stylesheets/no-ie.css">
<![endif]-->

และ

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

และนั่นก็ไม่ได้ผล โดยทั่วไปฉันพยายามทำให้หน้านี้ทำงานhttp://css-tricks.com/examples/ResponsiveTables/responsive.phpแต่ย้าย css ไปยังสไตล์ชีท แน่นอนมันต้องเป็นเรื่องง่าย ฉันพลาดอะไรไป ฉันไม่ควรใช้ JQuery หากไม่จำเป็น ไชโย


1
คุณไม่ต้องการ<!-->ทันทีหลังจาก<!--[if !IE]>
techfoobar

29
หมายเหตุ: หาก IE ใช้งานได้ถึง IE9 เท่านั้น
cameronjonesweb

บางคนทิ้งข้อความ IF ของ IE ไว้ในบางหน้า
neverMind9

@cameronjonesweb คุณสามารถลิงค์อ้างอิงได้มิฉะนั้นข้อความเช่นนี้จะไม่เป็นประโยชน์หรือไม่?
trainoasis

@trainoasis, ฉันทำได้, ยกเว้นความคิดเห็นของฉันคือ5 ปี
cameronjonesweb

คำตอบ:


236
<!--[if !IE]><!--><script src="zepto.min.js"></script><!--<![endif]-->
<!--[if IE]><script src="jquery-1.7.2.min.js"></script><![endif]-->

หมายเหตุ: ความคิดเห็นเงื่อนไขเหล่านี้ได้รับการ สนับสนุนอีกต่อไปจาก IE 10 เป็นต้นไป


39
ตั้งแต่เดือนมิถุนายน 2013 นี่เป็นคำตอบเดียวที่ถูกต้องในหน้านี้
JohnB

2
บรรทัดนี้ขาดวงเล็บมุมปิดหรือไม่? ไม่ควร: <! - [if! IE]> <! -> <script src = "zepto.min.js"> </script> <! -> <! [endif] ->
n00shie

1
สิ่งนี้รวมถึงโซลูชั่นแสดงความคิดเห็นแบบมีเงื่อนไขอื่น ๆ จะไม่ตรวจจับ IE 10 / IE 11
Lloyd Banks

9
มันไม่ทำงานใน IE 11 แต่โหลดสคริปต์แม้ว่าเงื่อนไขคือ! IE
Giedrius

49
@Giedrius จาก IE10 บนไม่สามารถใช้ความคิดเห็นแบบมีเงื่อนไขได้อีกต่อไป : msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
acdcjunior

70

เบราว์เซอร์อื่นที่ไม่ใช่ IE ถือว่าคำสั่งแบบมีเงื่อนไขเป็นความคิดเห็นเพราะมันอยู่ในแท็กความคิดเห็น

<!--[if IE]>
Non-IE browsers ignore this
<![endif]-->

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

<!--[if !IE]-->
IE ignores this
<!--[endif]-->

หมายเหตุ: ความคิดเห็นเงื่อนไขเหล่านี้ได้รับการสนับสนุนอีกต่อไปจาก IE 10 เป็นต้นไป


1
เยี่ยมมาก ขอบคุณสำหรับสิ่งนั้น สไตล์ชีททำงานได้ แต่ปัญหาที่ฉันมีตอนนี้คือที่ด้านบนของหน้าเหนือส่วนหัวที่ปรากฏในเช่น <! - [if! IE] -> <! - [endif] -> (แท็กไป ในพื้นที่ส่วนหัวไม่ใช่ส่วนของร่างกาย)
user1516788

21
-1: คำตอบนี้จะไม่ถูกต้องเพราะ<!--[if !IE]-->IE ignores this<!--[endif]-->จะไม่ซ่อนจาก IE! (7, 8 หรือ 9)
JohnB

3
ไม่มีคำตอบใดที่เหมาะกับฉันบางทีอาจมีบางอย่างเปลี่ยนแปลงใน IE10 รุ่นล่าสุด (ลองใช้ในโหมด IE9 ด้วย) - ความพยายามทั้งหมดสิ้นสุดลงถึงส่วน! IE บนเบราว์เซอร์ทั้งหมด (IE ไม่ใช่ IE)
Danny Varod

2
IE10 ไม่รองรับคำสั่งแบบมีเงื่อนไข
Scorpius

1
ระวังช่องว่างใน <! - [ถ้า IE]> และ <! [endif] -> - ไม่ควรมีช่องว่างใด ๆ (เช่นระหว่าง! - และ [มันไม่ทำงานกับ whitespaces
Robert Skarżycki

37

การอัปเดตหากมีคนยังมาที่หน้านี้สงสัยว่าทำไมการกำหนดเป้าหมาย ie ไม่ทำงาน IE 10 ขึ้นไปไม่สนับสนุนความคิดเห็นตามเงื่อนไขอีกต่อไป จากเว็บไซต์ทางการของ MS:

การสนับสนุนสำหรับความคิดเห็นแบบมีเงื่อนไขถูกลบออกในมาตรฐาน Internet Explorer 10 และโหมด quirks เพื่อปรับปรุงการทำงานร่วมกันและการปฏิบัติตาม HTML5

โปรดดูรายละเอียดเพิ่มเติมที่นี่: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx

หากคุณต้องการกำหนดเป้าหมายเช่นคุณสามารถใช้รหัส jquery นี้เพื่อเพิ่มคลาสเช่นและจากนั้นใช้คลาส. iie ใน CSS ของคุณเพื่อกำหนดเป้าหมายเช่นเบราว์เซอร์

if ($.browser.msie) {
 $("html").addClass("ie");
}

อัปเดต: $ .browser ไม่สามารถใช้ได้หลังจาก jQuery 1.9 หากคุณอัปเกรดเป็น jQuery ด้านบน 1.9 หรือคุณใช้ไปแล้วคุณสามารถรวมสคริปต์การย้ายข้อมูล jQuery หลัง jQuery เพื่อเพิ่มส่วนที่ขาดหายไป: jQuery Migrate Plugin

หรือตรวจสอบหัวข้อนี้เพื่อหาวิธีแก้ไขที่เป็นไปได้: browser.msie error หลังจากอัพเดตเป็น jQuery 1.9.1


นั่นเป็นทางออกที่ดีจริง! ฉันไม่จำเป็นต้องใช้มันบนทรี dom เพื่อใช้บางคลาส
mmm

2
โปรดทราบว่าสิ่งนี้เลิกใช้แล้วตั้งแต่ jQuery 1.3 และนำออกใน 1.9
Jøran

13

ฉันใช้มันและใช้งานได้:

<!--[if !IE]><!--> if it is not IE <!--<![endif]-->

ผลลัพธ์นี้ใน Firefox เพียงแค่จัดการเนื้อหาทั้งหมดเป็นความคิดเห็นสำหรับฉัน @Charmander solution ทำงานได้ทั้ง IE และ Firefox - <! [if! IE]> <! [endif]>
Tom Chamberlain

3
หมายเหตุ: ความคิดเห็นแบบมีเงื่อนไขเหล่านี้ไม่ได้รับการสนับสนุนจาก IE 10 เป็นต้นไป
Flimm

12

ไวยากรณ์ที่ Microsoft แนะนำสำหรับ“ ระดับความคิดเห็น” ที่เปิดเผยตามเงื่อนไขคือ:

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

สิ่งเหล่านี้ไม่ใช่ความคิดเห็น แต่ทำงานได้อย่างถูกต้อง


พบลิงค์นี้ที่รองรับคำตอบนี้ยังมีข้อมูลอื่น ๆ อีกมากมายที่สามารถช่วยเธรดฉันคิดว่านี่เป็นหัวข้อที่สำคัญ ... ความแตกต่างเพียงอย่างเดียวที่ฉันเห็นคือถ้าใช้ไวยากรณ์ที่ซ่อนอยู่หรือเปิดเผยและไม่แน่ใจว่าสิ่งนี้จะเป็นอย่างไร จะมีผลกับเบราว์เซอร์อื่น ๆ ... msdn.microsoft.com/en-us/library/ms537512.ASPX
user1360809

2
หมายเหตุ: ความคิดเห็นแบบมีเงื่อนไขเหล่านี้ไม่ได้รับการสนับสนุนจาก IE 10 เป็นต้นไป
Flimm

8

ก่อนอื่นไวยากรณ์ที่ถูกต้องคือ:

<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="https://stackoverflow.com/stylesheets/ie6.css" />
<![endif]-->

ลองโพสต์นี้: http://www.quirksmode.org/css/condcom.html และ http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

อีกสิ่งหนึ่งที่คุณสามารถทำได้:

ตรวจสอบเบราว์เซอร์ด้วย jQuery:

if($.browser.msie){ // do something... }

ในกรณีนี้คุณสามารถเปลี่ยนกฎ CSS สำหรับองค์ประกอบบางอย่างหรือเพิ่มการอ้างอิงลิงค์ CSS ใหม่:

อ่านนี้: http://rickardnilsson.net/post/2008/08/02/Applying-stylesheets-dynamically-with-jQuery.aspx


ดูคำตอบของ user1324409 ด้านบนสำหรับคำตอบที่แม่นยำยิ่งขึ้น
Chris Peters

2
เนื่องจากการอัปเดต jQuery ใครก็ตามที่ใช้ $ .browser.msie จะต้องรวม jquery-migrate.js แล้วจึงใช้งานได้
AspiringCanadian

1
หมายเหตุ: ความคิดเห็นแบบมีเงื่อนไขเหล่านี้ไม่ได้รับการสนับสนุนจาก IE 10 เป็นต้นไป
Flimm

ลิงก์ที่ให้ไว้ในคำตอบนั้นตาย
Pankaj

8

คุณต้องใส่ที่ว่างสำหรับ<!-- [if !IE] --> บล็อกเต็มของฉันไปดังนี้เนื่องจาก IE8 แย่มากกับการสืบค้นสื่อ

<!-- IE 8 or below -->   
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css"  href="https://stackoverflow.com/Resources/css/master1300.css" />        
<![endif]-->
<!-- IE 9 or above -->
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" media="(max-width: 100000px) and (min-width:481px)"
    href="https://stackoverflow.com/Resources/css/master1300.css" />
<link rel="stylesheet" type="text/css" media="(max-width: 480px)"
    href="https://stackoverflow.com/Resources/css/master480.css" />        
<![endif]-->
<!-- Not IE -->
<!-- [if !IE] -->
<link rel="stylesheet" type="text/css" media="(max-width: 100000px) and (min-width:481px)"
    href="/Resources/css/master1300.css" />
<link rel="stylesheet" type="text/css" media="(max-width: 480px)"
    href="/Resources/css/master480.css" />
<!-- [endif] -->

ขอบคุณสำหรับความคิดเห็นของคุณ แต่ถ้าฉันใช้ <! - [if! IE] -> <link rel = "stylesheet" type = "text / css" href = "/ stylesheets / no-ie.csss" /> <! - [endif] -> จากนั้นเบราว์เซอร์อื่นก็ใช้สิ่งนี้เช่นกัน
user1516788

3
นั่นเป็นประเด็นหรือไม่ที่จะมีเบราว์เซอร์อื่น ๆ ที่ใช้ส่วนนั้น
John Hayford

1
-1: !IEเทคนิคที่กล่าวถึงในที่นี้จะดำเนินการบล็อกความคิดเห็นจริงสำหรับ IE 7 ถึง 10
Ian Campbell

1
หมายเหตุ: ความคิดเห็นแบบมีเงื่อนไขเหล่านี้ไม่ได้รับการสนับสนุนจาก IE 10 เป็นต้นไป
Flimm

8

สำหรับการกำหนดเป้าหมายผู้ใช้ IE:

<!--[if IE]>
Place Content here for Users of Internet Explorer.
<![endif]-->

สำหรับการกำหนดเป้าหมายอื่น ๆ ทั้งหมด:

<![if !IE]>
Place Content here for Users of all other Browsers.
<![endif]>

Internet Explorer สามารถตรวจสอบความคิดเห็นตามเงื่อนไขได้เท่านั้นเบราว์เซอร์อื่น ๆ ทั้งหมดจะแสดงความคิดเห็นตามปกติ

ในการกำหนดเป้าหมาย IE 6,7 เป็นต้นคุณต้องใช้ "Greater Than Equal" หรือ "Lesser Than (Equal)" ในคำสั่ง If แบบนี้.

มากกว่าหรือเท่ากับ:

<!--[if gte IE 7]>
Place Content here for Users of Internet Explorer 7 or above.
<![endif]-->

น้อยกว่า:

<!--[if lt IE 6]>
Place Content here for Users of Internet Explorer 5 or lower.
<![endif]-->

ที่มา: mediacollege.com


2
หมายเหตุ: ความคิดเห็นแบบมีเงื่อนไขเหล่านี้ไม่ได้รับการสนับสนุนจาก IE 10 เป็นต้นไป
Flimm

7

นี่คือจนกว่า IE9

<!--[if IE ]>
<style> .someclass{
    text-align: center;
    background: #00ADEF;
    color: #fff;
    visibility:hidden;  // in case of hiding
       }
#someotherclass{
    display: block !important;
    visibility:visible; // in case of visible

}
</style>

นี่คือหลังจาก IE9

  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {enter your CSS here}

5

สำหรับเบราว์เซอร์ IE:

<!--[if IE]>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode">
<![endif]-->

สำหรับเบราว์เซอร์ที่ไม่ใช่ IE ทั้งหมด:

<![if !IE]>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<![endif]>

สำหรับ IE ทั้งหมดที่มากกว่า 8 หรือเบราว์เซอร์ที่ไม่ใช่ IE:

<!--[if (gt IE 8)|!(IE)]><!--><script src="/_JS/library/jquery-2.1.1.min.js"></script><!--<![endif]-->

3

ความคิดเห็นที่มีเงื่อนไขคือความคิดเห็นที่เริ่มต้นด้วย<!--[if IE]>ซึ่งเบราว์เซอร์ใด ๆ ไม่สามารถอ่านได้ยกเว้น IE

จาก 2011 ความคิดเห็นตามเงื่อนไขไม่ได้รับการสนับสนุนในรูปแบบเริ่มต้น IE 10 ตามที่ Microsoft ประกาศในเวลานั้นhttps://msdn.microsoft.com/en-us/library/hh801214(v=vs.85).aspx

ตัวเลือกเดียวในการใช้ความคิดเห็นตามเงื่อนไขคือการร้องขอให้ IE เรียกใช้ไซต์ของคุณเป็น IE 9 ซึ่งรองรับการแสดงความคิดเห็นตามเงื่อนไข

คุณสามารถเขียนไฟล์ css และ / หรือ js ของคุณเองสำหรับเฉพาะเบราว์เซอร์อื่น ๆ และจะไม่โหลดหรือรันมัน

ส่วนย่อยของรหัสนี้แสดงวิธีทำให้ IE 10 หรือ 11 ทำงาน ie-only.css และ ie-only.js ซึ่งมีรหัสที่กำหนดเองเพื่อแก้ไขปัญหาความเข้ากันได้ของ IE

    <html>
      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
      <!--[if IE]>
            <meta http-equiv="Content-Type" content="text/html; charset=Unicode">
            <link rel="stylesheet" type="text/css" href='/css/ie-only.css' />
            <script src="/js/ie-only.js"></script>
      <![endif]-->
    </html>

1

ในกรณีที่คุณทำงานกับ IE 10 ขึ้นไปดังที่กล่าวไว้ในhttp://tanalin.com/en/articles/ie-version-js/ความคิดเห็นแบบมีเงื่อนไขจะไม่ได้รับการสนับสนุนอีกต่อไป คุณอาจอ้างถึงhttps://gist.github.com/jasongaylord/5733469เป็นวิธีทางเลือกซึ่งเวอร์ชัน Trident ได้รับการตรวจสอบเช่นกันจาก navigator.userAgent สิ่งนี้จะตรวจสอบในกรณีที่เบราว์เซอร์ทำงานในโหมดความเข้ากันได้


1

สิ่งนี้ใช้ได้กับฉันในทุกเบราว์เซอร์ที่สูงกว่ารุ่น 6 (IE7, 8, 9, 10, ฯลฯ Chrome 3 จนถึงตอนนี้และ FF ver 3 ขึ้นอยู่กับตอนนี้):

//test if running in IE or not
        function isIE () {
            var myNav = navigator.userAgent.toLowerCase();
            return (myNav.indexOf('msie') != -1 || myNav.indexOf('trident') != -1) ? true : false;
        }

0

ฉันใช้จาวาสคริปต์นี้เพื่อตรวจหาเบราว์เซอร์ IE

if (
    navigator.appVersion.toUpperCase().indexOf("MSIE") != -1 ||
    navigator.appVersion.toUpperCase().indexOf("TRIDENT") != -1 ||
    navigator.appVersion.toUpperCase().indexOf("EDGE") != -1
)
{
    $("#ie-warning").css("display", "block");
}

0

ขอบคุณ Fernando68 ฉันใช้สิ่งนี้:

function isIE () {
     var myNav = navigator.userAgent.toLowerCase();
     return (myNav.indexOf('msie') != -1 || myNav.indexOf('trident') != -1) ? true : false;
}

if(isIE()){
     $.getScript('js/script.min.js', function() {
            alert('Load was performed.');
     });
}

-1

ฉันได้รับรหัสนี้ทำงานบนเบราว์เซอร์ของฉัน:

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

หมายเหตุสำหรับรหัสนี้: HTML5 Shiv และ Respond.js รองรับ IE8 ขององค์ประกอบ HTML5 และการสืบค้นสื่อ

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.