ฉันจะกำหนดเป้าหมายเฉพาะ Internet Explorer 10 สำหรับบางสถานการณ์เช่น CSS เฉพาะ Internet Explorer หรือรหัส JavaScript เฉพาะ Internet Explorer ได้อย่างไร

160

ฉันจะกำหนดเป้าหมายเฉพาะ Internet Explorer 10 สำหรับบางสถานการณ์เช่น CSS เฉพาะ Internet Explorer หรือรหัส JavaScript เฉพาะ Internet Explorer ได้อย่างไร

ฉันลองสิ่งนี้ แต่มันไม่ทำงาน:

<!--[if IE 10]>    <html class="no-js ie10" lang="en"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

Internet Explorer 10 ละเว้นความคิดเห็นเงื่อนไขและใช้แทน<html lang="en" class="no-js"><html class="no-js ie10" lang="en">

javascript  html  css  internet-explorer-10  conditional-comments 
— trusktr
แหล่งที่มา
8
ฉันคิดว่าคำถามที่ดีกว่าคือฉันจะทำให้ CSS นี้ดูเหมือนกันในเบราว์เซอร์ทั้งสองได้อย่างไร
— BentOnCoding
12
IE10 PP4 ยังคงสนับสนุนงบ@cc_on ดังนั้นการตรวจสอบว่า IE10 <!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className+=' ie10';}</script><!--<![endif]-->ได้รับการสนับสนุนหรือไม่คุณสามารถใช้รหัสต่อไปนี้: (ผมโพสต์นี้เป็นความคิดเห็นตั้งแต่ IE ยังคงอยู่ในการพัฒนาจึงไม่เป็นที่รู้จักไม่ว่าจะเป็นรุ่นสุดท้ายสนับสนุนคุณสมบัตินี้เช่นกัน)
— ร็อบ W
15
@RobW - โค้ดตัวอย่างของคุณจะผิดเมื่อ ie11 หมด เวอร์ชันที่<script>if(Function('/*@cc_on return document.documentMode===10@*/')()){document.documentElement.className+=' ie10';}</script>ปรับปรุง: การปรับปรุง: ไม่ต้องการความคิดเห็นตามเงื่อนไข ทำงานได้แม้ว่าการบีบอัด / ประมวลผลความคิดเห็น ไม่มีการเพิ่มคลาสสำหรับ ie11; จะทำงานร่วมกับ ie11 ที่ทำงานในโหมดความเข้ากันได้ ie10; ไม่จำเป็นต้องมีแท็กสคริปต์แบบสแตนด์อโลน (สามารถเพิ่มในจาวาสคริปต์อื่น ๆ ในหัว)
— robocat
2
ตัวอย่างข้อมูลโค้ดข้างต้น: jsbin.com/upofoq/2
— robocat
8
วิธีแก้ปัญหาทั่วไปเพิ่มเติมคือ: if(document.documentMode) document.documentElement.className+=' ie'+document.documentMode+'mode';- ซึ่งแก้ปัญหา 90% ของปัญหา (บางครั้งโหมดความเข้ากันได้ล้มเหลวซึ่งในกรณีนี้คุณต้องแก้ไขอีกระดับหนึ่งด้านบน)
— robocat

คำตอบ:

65

บางทีคุณสามารถลอง jQuery แบบนี้:

if ($.browser.msie && $.browser.version === 10) {
  $("html").addClass("ie10");
}

ในการใช้วิธีนี้คุณต้องรวมไลบรารี jQuery Migrate เนื่องจากฟังก์ชันนี้ถูกลบออกจากไลบรารี jQuery หลัก

ออกกำลังกายได้ดีทีเดียวสำหรับฉัน แต่แน่นอนไม่มีการแทนที่สำหรับความคิดเห็นตามเงื่อนไข!

— Max Sohrt
แหล่งที่มา
3
ฉันไม่แน่ใจเกี่ยวกับพวกคุณ แต่ฉันต้องใช้== '10.0'เพื่อการทำงาน
— lulalala
112
คำเตือน: jQuery.browserไม่สามารถใช้ได้ใน jQuery รุ่นปัจจุบัน (1.9) อีกต่อไปหากไม่มีปลั๊กอิน blog.jquery.com/2013/01/15/…
— dave1010
2
ฉันจะแนะนำ: if (jQuery.browser.msie && jQuery.browser.version < 10) { // do what you will here }หมายเหตุverion <10เพื่อตรวจสอบ IE รุ่นเก่ากว่า IE10 ขึ้นไปทำงานได้ดีกับ CSS3, HTML5, jquery และอื่น ๆ ทั้งหมดของฉัน
— Dan Mantyla
1
@dan เนื่องจากความคิดเห็นตามเงื่อนไขทำงานได้ในเบราว์เซอร์ IE ทั้งหมดที่น้อยกว่า 10 ข้อให้ใช้แทนการสร้างความวุ่นวายให้กับ JS สำหรับเบราว์เซอร์ทั้งหมด เพียงแค่พูดว่า <! - [ถ้า lte IE 9]> และคุณสามารถกำหนดเป้าหมายเวอร์ชัน IE ทั้งหมดที่น้อยกว่า 10 ไม่จำเป็นต้องใช้ JS
— edhurtig
1
@ Marc-AndréLafortuneยกประเด็นที่ดี ตามกฎของหัวแม่มือคุณควรใช้โอเปอเรเตอร์ === และไม่ == เมื่อทำการจาวาสคริปต์คุณจำเป็นต้องคำนึงถึงสิ่งนี้ stackoverflow.com/questions/359494/…
— Stewart
132

ฉันจะไม่ใช้ JavaScript navigator.userAgentหรือ$ .browser (ซึ่งใช้navigator.userAgent) เนื่องจากสามารถปลอมแปลงได้

หากต้องการกำหนดเป้าหมายเป็น Internet Explorer 9, 10 และ 11 (หมายเหตุ: ยังเป็น Chrome ล่าสุด):

@media screen and (min-width:0\0) { 
    /* Enter CSS here */
}

ในการกำหนดเป้าหมาย Internet Explorer 10:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS here */
}

ในการกำหนดเป้าหมาย Edge Browser:

@supports (-ms-accelerator:true) {
  .selector { property:value; } 
}

แหล่งที่มา:

— Roni
แหล่งที่มา
นั่นเป็นเรื่องดีจริง แต่เราควรกังวลขนาดไหนเมื่อทำการทดสอบโหมดเอกสารต่าง ๆ กับโหมดเบราว์เซอร์ใน IE? ในสถานการณ์ใดที่เราสามารถคาดหวังให้ผู้ใช้ออนไลน์ใช้โหมดเอกสารที่แตกต่างจากโหมดเบราว์เซอร์ปัจจุบัน
— klewis
คนมักจะไม่เปลี่ยนโหมดเอกสาร พวกเขาทำได้ แต่ฉันไม่ได้เจอเว็บไซต์ที่ต้องการให้ผู้ใช้เปลี่ยนโหมดเอกสาร หากคุณใช้ DOCTYPE ที่ถูกต้องนี่ไม่ใช่ปัญหาเลย
— Roni
3
คุณคือฮีโร่ของฉัน! เพียงแค่ทราบสิ่งนี้ยังแก้ไขบางสิ่งที่สับสนใน IE11
— locrizak
8
สิ่งนี้ส่งผลกระทบต่อ IE11 เช่นกัน - ดังนั้นหากคุณกำลังมองหาทางออกในการกำหนดเป้าหมายเฉพาะ IE9 / 10 อันนี้จะไม่ทำงาน :-(
— Lukasz Lenart
1
คุณหมายถึงอะไรโดย "ทุกคนกำลังตรวจจับเบราว์เซอร์ผ่านnavigator.userAgent"? การคอมไพล์ตามเงื่อนไขเป็นคุณสมบัติในตัวของรันไทม์ JScript ซึ่งไม่สามารถปลอมแปลงผ่านสตริงตัวแทนผู้ใช้
— BoltClock
111

ฉันพบวิธีแก้ปัญหาบนไซต์นี้ที่มีคนแสดงความคิดเห็นที่มีค่า:

ทางออกคือ:

if (Function('/*@cc_on return document.documentMode===10@*/')()){
    document.documentElement.className+=' ie10';
}

มัน

  • ไม่ต้องการความคิดเห็นตามเงื่อนไข
  • ทำงานได้แม้ว่าการบีบอัด / ประมวลผลความคิดเห็น
  • ไม่มีการเพิ่มคลาส ie10 ใน Internet Explorer 11;
  • มีแนวโน้มที่จะทำงานได้ตามที่ตั้งใจไว้กับ Internet Explorer 11 ที่ทำงานในโหมดความเข้ากันได้ของ Internet Explorer 10
  • ไม่ต้องการแท็กสคริปต์แบบสแตนด์อโลน (สามารถเพิ่มในรหัส JavaScript อื่น ๆ ในส่วนหัวได้)
  • ไม่ต้องการ jQuery เพื่อทดสอบ
— วิลเล็มเดอวิต
แหล่งที่มา
3
@ dave1010 ตัวแทนผู้ใช้สามารถปลอมแปลงได้อย่างง่ายดาย ความคิดเห็นแบบมีเงื่อนไขสนับสนุนโดยเอ็นจิน JScript เท่านั้นซึ่งมีเฉพาะใน IE4 + (รวมถึง 10)
— Rob W
2
@ dave1010 การเขียน parser ที่ใช้งานได้ซึ่งทำในสิ่งที่คุณกำลังอธิบายนั้นยากและไม่น่าเป็นไปได้ ใครก็ตามที่จงใจสร้างและติดตั้งส่วนขยายดังกล่าวมีแนวโน้มที่จะ "ทำตัวเหมือน" IE (อาจใช้เพื่อการทดสอบอัตโนมัติในสภาพแวดล้อมที่ไม่ใช่ Windows) ไม่รับประกันความน่าเชื่อถือ 100% ในเบราว์เซอร์ แต่คุณสามารถเข้าใกล้พอสมควร ความคิดเห็นแบบมีเงื่อนไขเป็นวิธีที่เชื่อถือได้สูงในการตรวจจับเอ็นจิน JScript ซึ่งเกิดขึ้นกับ IE
— Rob W
3
ข้อเสียเดียวที่ฉันเห็นคือมันต้องใช้ js ซึ่งเงื่อนไขไม่ได้
— James Westgate
4
นี่ควรเป็นคำตอบที่ดีที่สุดและความต้องการของ JS ควรเป็น moot สำหรับผู้ใช้ IE10 - หากปิดการใช้งาน JS อาจเป็นเพียงแค่ add-on ของ NoScript ฉันคิดว่าเราต้องการการศึกษาสาธารณะเพิ่มเติมเกี่ยวกับความโง่เขลาของ NoScript (ซึ่งตรงข้ามกับ addons ที่มีสติเช่น AdBlock หรือ Ghostery)
— iono
8
ฉันขอแนะนำให้ใช้รหัสทางเลือกโดยผู้เขียน: if (/*@cc_on!@*/false && document.documentMode === 10) {}ซึ่งได้รับรอบคำเตือน eval ในโปรแกรม linting
— ajbeaven
62

Internet Explorer 10 ไม่พยายามอ่านความคิดเห็นตามเงื่อนไขอีกต่อไป ซึ่งหมายความว่ามันจะจัดการกับความคิดเห็นตามเงื่อนไขเช่นเดียวกับเบราว์เซอร์อื่น ๆ เช่นเดียวกับความคิดเห็น HTML ปกติหมายถึงการไม่สนใจทั้งหมด ดูที่มาร์กอัปที่ให้ไว้ในคำถามเป็นตัวอย่างเบราว์เซอร์ทั้งหมดรวมถึง IE10 จะไม่สนใจส่วนความคิดเห็นที่เน้นสีเทาทั้งหมด มาตรฐาน HTML5 ไม่ได้กล่าวถึงไวยากรณ์ความคิดเห็นตามเงื่อนไขและนี่คือเหตุผลที่พวกเขาเลือกที่จะหยุดการสนับสนุนใน IE10

อย่างไรก็ตามโปรดทราบว่าการรวบรวมตามเงื่อนไขใน JScript ยังคงได้รับการสนับสนุนดังที่แสดงในความคิดเห็นรวมถึงคำตอบล่าสุด มันจะไม่หายไปในการเปิดตัวครั้งสุดท้ายเหมือนjQuery.browserกัน และแน่นอนว่าไม่มีการพูดว่าการดมกลิ่นเอเจนต์ของผู้ใช้ยังคงมีความเปราะบางเช่นเคยและไม่ควรใช้ไม่ว่าในกรณีใด ๆ

หากคุณต้องกำหนดเป้าหมาย IE10 จริงๆให้ใช้การรวบรวมตามเงื่อนไขซึ่งอาจยังเห็นการสนับสนุนในอนาคตอันใกล้หรือ - หากคุณสามารถช่วยได้ - ให้ใช้ไลบรารีการตรวจจับคุณสมบัติเช่นModernizrแทนการตรวจจับเบราว์เซอร์ (หรือร่วมกับ) เว้นแต่กรณีการใช้งานของคุณต้องมี noscript หรือรองรับ IE10 ทางฝั่งเซิร์ฟเวอร์การดมกลิ่นเอเจนต์ของผู้ใช้จะทำให้ปวดหัวมากกว่าตัวเลือกที่ทำงานได้

ฟังดูค่อนข้างยุ่งยาก แต่โปรดจำไว้ว่าในฐานะที่เป็นเบราว์เซอร์ที่ทันสมัยซึ่งเป็นไปตามมาตรฐานเว็บในปัจจุบัน1 อย่างมากโดยสมมติว่าคุณเขียนโค้ดที่ใช้งานร่วมกันได้ซึ่งเป็นไปตามมาตรฐานสูงคุณไม่ควรทำตั้งรหัสพิเศษสำหรับ IE10 นั่นคือมันควรจะคล้ายกับเบราว์เซอร์อื่น ๆ ในแง่ของพฤติกรรมและการแสดงผล 2และฟังดูลึกซึ้งจากประวัติของ IE แต่คุณคาดว่า Firefox หรือ Chrome จะมีพฤติกรรมแบบเดียวกับที่จะต้องพบกับความผิดหวัง

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

1 ไม่เพียง แต่ IE10 เท่านั้น แต่ IE9 และแม้แต่ IE8 ซึ่งจัดการมาตรฐาน CSS2.1 ที่ผู้ใหญ่ส่วนใหญ่ดีกว่า Chrome เพียงเพราะ IE8 ให้ความสำคัญกับการปฏิบัติตามมาตรฐานมากขึ้น (ซึ่งเวลานั้น CSS2.1 ค่อนข้างเสถียรแล้วด้วยความแตกต่างเล็กน้อยเท่านั้น จากคำแนะนำของวันนี้) ในขณะที่ Chrome ดูเหมือนว่าจะเป็นมากกว่าการสาธิตเทคโนโลยีแบบกึ่งขัดเงาของมาตรฐานหลอกที่ล้ำสมัย

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

— BoltClock
แหล่งที่มา
20
Chhhh ใช่ IE10 ยังล้าหลังอยู่ไกลจาก webkit และตุ๊กแก ฉันมี CSS บางอย่างดูดีใน webkit และน่าเกลียดใน IE10 หากฉันไม่สามารถหาวิธีที่จะเลือกใช้สไตล์ได้ฉันจะต้องละทิ้งสไตล์ดังกล่าว :(
— trusktr
2
มันมีค่าชี้ให้เห็นว่าความคิดเห็นตามเงื่อนไขถูกลบออกใน IE10 เพราะตอนนี้มีตัวแยกวิเคราะห์ HTML5 ความคิดเห็นแบบมีเงื่อนไขไม่ถูกต้องตามอัลกอริทึมการแยกวิเคราะห์ HTML5 ดูส่วนคุณสมบัติดั้งเดิมของblogs.msdn.com/b/ie/archive/2011/07/06/…
— David Storey
3
@trusktr หากคุณใช้งานได้ดีแล้วมันก็จะดูดีในเบราว์เซอร์ล่าสุดทั้งหมด
— Klevis Miho
10
@KlevisMiho ไม่เป็นความจริง Chrome และ Firefox รองรับฟีเจอร์ที่ IE ไม่มีแม้จะเขียนโค้ดได้ดี หากคุณหมายถึง "ใช้คุณสมบัติทั่วไปเท่านั้น" นั่นไม่เหมือนกับ "โค้ดดี"
— trusktr
5
@Dan Mantyla: ในกรณีนั้น<!--[if !IE]><!-->stuff you don't want IE9 and below to see<!--<![endif]-->
— BoltClock
36

สถานที่ที่ดีที่จะเริ่มเป็นเอกสาร IE สนับสนุนมาตรฐาน

นี่คือวิธีกำหนดเป้าหมาย IE10 ใน JavaScript:

if ("onpropertychange" in document && !!window.matchMedia) {
...
}

นี่คือวิธีกำหนดเป้าหมาย IE10 ใน CSS:

@media all and (-ms-high-contrast: none) {
...
}

ในกรณีที่ IE11 ต้องถูกกรองหรือรีเซ็ตผ่าน CSS โปรดดูคำถามอื่น: จะเขียน CSS hack สำหรับ IE 11 ได้อย่างไร

— Paul Sweatte
แหล่งที่มา
5
โซลูชัน CSS ของคุณส่งผลกระทบต่อ IE11: \
— Lukasz Lenart
11

โซลูชันทั้งสองโพสต์ที่นี่ (พร้อมการแก้ไขเล็กน้อย) ทำงาน:

<!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className='ie10';}</script><!--<![endif]-->

หรือ

<script>if(Function('/*@cc_on return 10===document.documentMode@*/')()){document.documentElement.className='ie10';}</script>

คุณรวมบรรทัดข้างบนไว้ในแท็กส่วนหัวของหน้า html ของคุณก่อนลิงก์ css ของคุณ จากนั้นในไฟล์ css คุณระบุสไตล์ของคุณที่มีคลาส "ie10" เป็นพาเรนต์:

.ie10 .myclass1 { }

และvoilà! - เบราว์เซอร์อื่นยังคงสภาพเหมือนเดิม และคุณไม่ต้องการ jQuery คุณสามารถดูตัวอย่างวิธีการดำเนินการที่ฉันได้ที่นี่: http://kardash.net

— Eugene Kardash
แหล่งที่มา
11

ฉันเขียนปลั๊กอิน JavaScript ขนาดเล็กของวานิลลาที่เรียกว่าเค้าโครงเครื่องยนต์ซึ่งช่วยให้คุณสามารถตรวจจับ IE 10 (และเบราว์เซอร์อื่น ๆ ) ได้ด้วยวิธีง่ายๆที่ไม่สามารถปลอมได้ซึ่งแตกต่างจากตัวแทนผู้ใช้ดมกลิ่น

เพิ่มชื่อเอ็นจินการเรนเดอร์เป็นคลาสบนแท็ก html และส่งคืนออบเจ็กต์ JavaScript ที่มีผู้จำหน่ายและเวอร์ชัน (ตามความเหมาะสม)

ลองดูโพสต์บล็อกของฉัน: http://mattstow.com/layout-engine.htmlและรับรหัสบน GitHub: https://github.com/stowball/Layout-Engine

— แมตต์สโตว์
แหล่งที่มา
7

ฉันใช้สคริปต์นี้ - มันเก่าไป แต่มีประสิทธิภาพในการกำหนดเป้าหมายสไตล์ชีทของ Internet Explorer 10 หรือไฟล์ JavaScript แยกต่างหากที่รวมเฉพาะเมื่อเบราว์เซอร์คือ Internet Explorer 10 เช่นเดียวกับที่คุณแสดงความคิดเห็นตามเงื่อนไข ไม่ต้องใช้ jQuery หรือปลั๊กอินอื่น ๆ

<script>
    /*@cc_on
      @if (@_jscript_version == 10)
          document.write(' <link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />');
      @end
    @*/
</script >
— เดโบราห์
แหล่งที่มา
2
เย็น. คุณสามารถเพิ่มข้อมูลเล็กน้อยเกี่ยวกับ @statements เหล่านั้นได้อย่างไร
— trusktr
6

คุณสามารถใช้ PHP เพื่อเพิ่มสไตล์ชีทสำหรับ IE 10

ชอบ:

if (stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10')) {
    <link rel="stylesheet" type="text/css" href="../ie10.css" />
}
— Lenny Bruyninckx
แหล่งที่มา
2
มันไม่สมเหตุสมผลที่จะใส่สตริงเนื่องจาก stripos ไม่
— คำนึงถึงขนาดตัวพิมพ์
2
ฉันมักจะล่อลวงสำหรับเรื่องนี้ แต่จำไว้ว่ามันจะหยุดเมื่อมี cdn / แคช / พร็อกซีที่ปลายด้านหน้า
— Johan
5

หากคุณต้องทำสิ่งนี้คุณสามารถตรวจสอบสตริงตัวแทนผู้ใช้ใน JavaScript:

var isIE10 = !!navigator.userAgent.match(/MSIE 10/);

อย่างที่คนอื่น ๆ พูดถึงผมขอแนะนำให้ตรวจจับคุณสมบัติแทน

— dave1010
แหล่งที่มา
`` !! 'มีไว้ทำอะไร?
— Francisco Corrales Morales
4
String.match()จะส่งกลับอาร์เรย์สำหรับการจับคู่หรือโมฆะถ้าไม่ !(String.match())ทำให้มันกลับเท็จสำหรับการแข่งขันหรือเป็นจริงสำหรับการแข่งขันที่ไม่มี !(!(String.match()))ทำให้มันกลับมาจริงสำหรับการแข่งขันหรือเท็จสำหรับการแข่งขันที่ไม่มี !(!(something))หรือเพียงแค่!!somethingแปลงอะไรเป็นบูลีนจริง / เท็จ stackoverflow.com/questions/784929/…
— dave1010
@FranciscoCorralesMorales โอ้หลายครั้งที่ฉันถูกถามว่าเมื่อรหัสของฉันอยู่ภายใต้การพิจารณา :) ในขณะที่การขยายตัวในการแสดงความคิดเห็นที่ดี dave1010 ของมันสามารถใช้ในการบีบบังคับ 'truthy' หรือ 'falsy' ค่าเป็นเนื้อแท้ค่าเช่นboolean var name = 'me', hasName = !!name;
— WynandB
4

หากคุณต้องการกำหนดเป้าหมาย IE 10 ด้วย Vanilla JavaScript คุณอาจต้องการลองตรวจจับคุณสมบัติ CSS: 

if (document.body.style.msTouchAction != undefined) {
  document.body.className = 'ie10';
}

คุณสมบัติ CSS

แทนที่จะเป็นmsTouchActionคุณสามารถใช้หนึ่งในคุณสมบัติ CSS เหล่านี้ได้เนื่องจากปัจจุบันมีเฉพาะใน IE 10 เท่านั้น แต่สิ่งนี้อาจเปลี่ยนแปลงได้ในอนาคต

  • msTouchAction
  • msWrapFlow
  • msWrapMargin
  • msWrapThrough
  • msScrollLimit
  • msScrollLimitXMin
  • msScrollLimitYMin
  • msScrollLimitXMax
  • msScrollLimitYMax
  • msFlexbox
  • msFlex
  • msFlexOrder

หน้าทดสอบ

ฉันได้รวบรวมหน้าทดสอบพร้อมด้วยคุณสมบัติทั้งหมดใน CodePen

— TimPietrusky
แหล่งที่มา
3

clipBoardData เป็นฟังก์ชั่นที่มีเฉพาะใน IE เท่านั้นดังนั้นหากคุณต้องการกำหนดเป้าหมายไปที่ IE ทุกเวอร์ชันคุณสามารถใช้งานได้

<script type="text/javascript">
if (window.clipboardData)
            alert("You are using IE!");
</script>
— Njaal Gjerde
แหล่งที่มา
-1: แต่รุ่นนี้เป็นอย่างไร? คุณจะบอกได้ว่าเวอร์ชันไหนเป็นอย่างไร
— Francisco Corrales Morales
เบราว์เซอร์ Edge ไม่มี "window.clipboardData" เช่นกัน
— AFD
@AFD คำถามนี้เกี่ยวกับ IE ไม่ใช่ Edge
— TylerH
3

CSS สำหรับ IE10 + และ IE9

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ styles */
}

@media screen\0 {
    /* IE8,9,10 styles*/
}
— svnm
แหล่งที่มา
1

คุณสามารถใช้การตรวจจับคุณสมบัติเพื่อดูว่าเบราว์เซอร์คือ IE10 หรือสูงกว่าเช่นนั้น

var isIE = false;
if (window.navigator.msPointerEnabled) {
    isIE = true;
}

เป็นจริงเฉพาะในกรณี> IE9

— George Filippakos
แหล่งที่มา
1

ด้วย JavaScript:

if (/Trident/g.test(navigator.userAgent)) { // detect trident engine so IE
        document.getElementsByTagName('html')[0].className= 'no-js ie'; }

ทำงานได้กับ IE ทั้งหมด

IE08 => 'Trident/4.0'

IE09 => 'Trident/5.0'

IE10 => 'Trident/6.0'

IE11 => 'Trident/7.0'

ดังนั้นเปลี่ยน/Trident/gตาม/Trident/x.0/gที่x = 4, 5, 6หรือ7(หรืออาจจะ8ในอนาคต)

— พลิกเหตุการณ์
แหล่งที่มา
1

ฉันแค่ต้องการเพิ่มการตรวจจับ IE เวอร์ชันของฉัน มันขึ้นอยู่กับตัวอย่างพบได้ที่http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/และ exteded ยังสนับสนุน IE10 และ IE11 ตรวจพบ IE 5 ถึง 11

สิ่งที่คุณต้องทำคือเพิ่มที่ใดที่หนึ่งจากนั้นคุณสามารถตรวจสอบกับเงื่อนไขที่เรียบง่าย var ส่วนกลางisIEจะไม่ถูกกำหนดถ้าไม่ใช่ IE หรือจะเป็นหมายเลขรุ่น เพื่อให้คุณสามารถเพิ่มสิ่งต่าง ๆ เช่นif (isIE && isIE < 10)หรือเหมือนกันได้อย่างง่ายดาย

var isIe = (function(){
    if (!(window.ActiveXObject) && "ActiveXObject" in window) { return 11; /* IE11 */ }
    if (Function('/*@cc_on return /^10/.test(@_jscript_version) @*/')()) { return 10; /* IE10  */ }
    var undef,
        v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');
    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
            all[0]
        );
    return v > 4 ? v : undef;
}());
— มกราคม
แหล่งที่มา
0

สำหรับฉันรหัสต่อไปนี้ทำงานได้ดีความคิดเห็นตามเงื่อนไขทั้งหมดจะทำงานในทุกรุ่น IE:

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 11)|!(IE)]><!--> <html> <!--<![endif]-->

<script>
    if (document.documentMode===10){
        document.documentElement.className+=' ie10';
    }
    else if (document.documentMode===11){
        document.documentElement.className+=' ie11';
    }
</script>

ฉันใช้ windows 8.1 ไม่แน่ใจว่าเกี่ยวข้องกับการอัพเดท ie11 หรือไม่ ...

— อเล็กซ์
แหล่งที่มา
1
(gt IE 11)บิตไม่จำเป็นครบถ้วน คุณอาจทำเช่นกัน<!--[if !(IE)]<!-->แทน
— BoltClock
BoltClock ถ้า (gt IE 11) ถูกปล่อยออกมาและเบราว์เซอร์ของผู้ใช้คือ IE 12 (เมื่อออกมา) จะไม่มีองค์ประกอบ html ที่กำหนดไว้
— Leonardo Gonzalez
0

นี่คือวิธีที่ฉันทำ CSS ที่กำหนดเองสำหรับ Internet Explorer:

ในไฟล์ JavaScript ของฉัน:

function isIE () {
      var myNav = navigator.userAgent.toLowerCase();
      return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}

jQuery(document).ready(function(){
    if(var_isIE){
            if(var_isIE == 10){
                jQuery("html").addClass("ie10");
            }
            if(var_isIE == 8){
                jQuery("html").addClass("ie8");
                // you can also call here some function to disable things that 
                //are not supported in IE, or override browser default styles.
            }
        }
    });

จากนั้นในไฟล์ CSS ของฉัน, y จะกำหนดสไตล์ที่แตกต่างกัน:

.ie10 .some-class span{
    .......
}
.ie8 .some-class span{
    .......
}
— Francisco Corrales Morales
แหล่งที่มา
0

ใช้ babel หรือ typescript สำหรับแปลงรหัสนี้ js

const browser = () => {
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3576.0 Safari/537.36"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.17 Safari/537.36"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17763"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0"
    // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko"
    // "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    const _userAgent = navigator.userAgent;
    const br = {
        "Chrome": "Chrome",
        "Edge": "Edge",
        "Firefox": "Firefox",
        ".NET CLR": "Internet Explorer 11",
    };
    const nobr = {
        "MSIE 10.0": "Internet Explorer 10",
        "MSIE 9.0": "Internet Explorer 9",
        "MSIE 8.0": "Internet Explorer 8",
        "MSIE 7.0": "Internet Explorer 7"
    };
    let thisBrow = "Unknown";
    for (const keys in br) {
        if (br.hasOwnProperty(keys)) {
            if (_userAgent.includes(keys)) {

                thisBrow = br[keys];

                for (const key in nobr) {
                    if (_userAgent.includes(key)) {
                        thisBrow = nobr[key];
                    }
                }

            }
        }
    }

    return thisBrow;
};
ขยายตัวอย่างข้อมูล

— Aliaksandr Shpak
แหล่งที่มา
สวัสดี Aliaksandr ขอบคุณสำหรับความคิด! ไม่แน่ใจว่าทำไมมีคน downvote แต่ฉัน upvoted เพราะคำตอบนั้นเป็นคำแนะนำที่เป็นประโยชน์อย่างน้อย ใครลงคะแนนทำไมไม่ช่วยผู้ใช้ใหม่ด้วยคำแนะนำที่เป็นประโยชน์?
— trusktr
-2

คำตอบนี้ทำให้ฉัน 90% ของวิธีการที่นั่น ฉันพบคำตอบที่เหลือในเว็บไซต์ Microsoft ที่นี่เว็บไซต์ของไมโครซอฟท์ที่นี่

โค้ดด้านล่างคือสิ่งที่ฉันใช้เพื่อกำหนดเป้าหมายทั้งหมดเช่นโดยการเพิ่มคลาส. ii ไว้ <html>

ใช้ jQuery (ซึ่งเลิกใช้. Browser แทนเอเจนต์ผู้ใช้ใน 1.9+ ดูที่http://api.jquery.com/jQuery.browser/ ) เพื่อเพิ่มคลาส. iie:

// ie identifier
$(document).ready(function () {
  if (navigator.appName == 'Microsoft Internet Explorer') {
    $("html").addClass("ie");
  }
});
— bdanin
แหล่งที่มา
"ซึ่งเลิก .browser ในความโปรดปรานของตัวแทนผู้ใช้ใน 1.9+" มันไม่ได้พูดว่า "ในความโปรดปรานของตัวแทนผู้ใช้" - สิ่งที่หมายถึง - มันกล่าวว่าในความโปรดปรานของการตรวจสอบคุณสมบัติ
— BoltClock
-2

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

<!--[if gt IE 9]><!--> Your code here. <!--<![endif]-->

มาจากhttp://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither

— user1003757
แหล่งที่มา
1
ฉันไม่ได้ -1 คำตอบของคุณ แต่การเชื่อมโยงที่ดูเหมือนว่าค่อนข้าง outd- แปด -ed นอกจากนี้ยังเป็นที่น่าสังเกตว่า OP มีวัตถุประสงค์เพื่อกำหนดเป้าหมาย IE10 และ IE10 เท่านั้น ไม่ว่าข้อมูลโค้ดของคุณจะไม่ทำงานสำหรับ IE10 หรือสูงกว่าหรือเบราว์เซอร์ที่ไม่ใช่ IE อื่น ๆ เนื่องจากความคิดเห็นตามเงื่อนไขได้รับการสนับสนุนเฉพาะใน IE5 จนถึง IE9
— WynandB
-2

หากคุณต้องการจริงๆคุณสามารถแสดงความคิดเห็นตามเงื่อนไขได้โดยเพิ่มบรรทัดต่อไปนี้ลงใน<head>:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

แหล่ง

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