html - Hur riktar jag endast in mig på Internet Explorer 10 för vissa situationer som Internet Explorer-specifik CSS eller Internet Explorer-specifik JavaScript-kod?

Hur riktar jag endast in mig på Internet Explorer 10 för vissa situationer som Internet Explorer-specifik CSS eller Internet Explorer-specifik JavaScript-kod?

Jag försökte detta, men det fungerar inte:

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

Internet Explorer 10 ignorerar de villkorade kommentarerna och använder <html lang="en" class="no-js"> istället för <html class="no-js ie10" lang="en">.

Svar #1

Jag skulle inte använda JavaScript navigator.userAgent eller $.browser (som använder navigator.userAgent) eftersom det kan förfalskas.

För att rikta in sig på Internet Explorer 9, 10 och 11 (Obs: även den senaste Chrome):

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

För att rikta in sig på Internet Explorer 10:

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

För att rikta in sig på Edge-webbläsaren:

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

Källor :

  • Flytta Internet Explorer-specifik CSS till @media-block
  • Hur man riktar in sig på Internet Explorer 10 och 11 i CSS
  • CSS-hackar för Windows 10 och Microsofts Edge-webbläsare

Svar #2

Jag hittade en lösning på den här sidan där någon hade en värdefull kommentar:

Lösningen är:

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

Det

  • behöver inte villkorskommentarer;
  • fungerar även om kommentaravstrippande komprimering/behandling;
  • ingen ie10-klass tillagd i Internet Explorer 11;
  • mer sannolikt att fungera som avsett med Internet Explorer 11 som körs i Internet Explorer 10-kompatibilitetsläge;
  • behöver inte ett fristående script-tag (kan bara läggas till i annan JavaScript-kod i head).
  • behöver inte jQuery för att testa

Svar #3

Kanske kan du prova lite jQuery som detta:

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

För att använda denna metod måste du inkludera jQuery Migrate-biblioteket eftersom denna funktion togs bort från huvudbiblioteket jQuery.

Fungerde ganska bra för mig. Men verkligen inget ersättningsalternativ för villkorliga kommentarer!

Svar #4

Internet Explorer 10 försöker inte längre läsa villkorliga kommentarer. Detta innebär att det kommer att behandla villkorliga kommentarer precis som vilken annan webbläsare som helst: som vanliga HTML-kommentarer, avsedda att helt ignoreras. Om man tittar på markeringen som ges i frågan som exempel, kommer alla webbläsare inklusive IE10 att ignorera kommentardelarna, markerade i grått, helt och hållet. HTML5-standarden nämner inte någon syntax för villkorliga kommentarer, och detta är exakt varför de har valt att sluta stödja det i IE10.

Notera dock att villkorsstyrd kompilation i JScript fortfarande stöds, som visas i kommentarerna samt de mer nyliga svaren. Det försvinner inte heller i den slutliga versionen, till skillnad från jQuery.browser. Och självklart är det sagt, att användaragentdetektering förblir lika skör som alltid och bör aldrig användas under några omständigheter.

Om du verkligen måste rikta in dig på IE10, använd antingen villkorlig kompilation som fortfarande kan få stöd inom en nära framtid, eller — om du kan undvika det — använd ett funktionsdetekteringsbibliotek som Modernizr istället för (eller tillsammans med) webbläsardetektering. Om inte ditt användningsfall kräver noscript eller att ta hänsyn till IE10 på serversidan, kommer användaragentavkänning att vara mer av en huvudvärk än ett gångbart alternativ.

Låter ganska besvärligt, men kom ihåg att som en modern webbläsare som är mycket följsam mot dagens webbstandarder1, förutsatt att du har skrivit interoperabel kod som är mycket standardkompatibel, bör du inte behöva sätta åt sidan speciell kod för IE10 om det inte är absolut nödvändigt, d.v.s. den ska likna andra webbläsare när det gäller beteende och rendering.2 Och det låter osannolikt, med tanke på IEs historia, men hur många gånger har du förväntat dig att Firefox eller Chrome ska bete sig på samma sätt för att sedan bli besviken?

  • Firefox stödde inte box-sizing utan prefix under flera år
  • Firefox har historiskt sett haft konstigt konturbeteende, och det var också fallet i många år
  • Firefox vägrar att bete sig på ett rimligt sätt när det gäller positionerade tabellceller och citerar odefinierat beteende som ursäkt, medan andra webbläsare verkar klara det utan problem
  • Safari och Chrome har mycket problem med vissa CSS-selektorer, ibland med lösningar som verkligen tar dig tillbaka till de goda gamla dagarna med IE5, IE6 och IE7
  • Chrome verkar ha mycket problem i allmänhet med ommålning, till exempel att inte omflöda layouter korrekt när mediestilar uppdateras; det verkar som att hälften av Chromes buggar kan undvikas enkelt och enbart genom att tvinga fram en ommålning, igen IE5/6/7-nivå saker
  • Några varianter av WebKit har varit kända för att helt enkelt ljuga om stöd för vissa funktioner, vilket betyder att de faktiskt bekämpar funktionsdetektionsmekanismer, av alla saker

Om du verkligen har en legitim anledning att rikta in dig på vissa webbläsare, använd gärna de andra verktygen som ges till dig för att upptäcka dem. Jag säger bara att du kommer att ha mycket svårare att hitta en sådan anledning idag än tidigare, och det är verkligen inte något du kan lita på.

1 Inte bara IE10, utan även IE9, och till och med IE8 som hanterar större delen av den mogna CSS2.1-standarden mycket bättre än Chrome, helt enkelt för att IE8 var så fokuserat på standardkompatibilitet (vid den tiden var CSS2.1 redan ganska stabil med endast små skillnader från dagens rekommendation) medan Chrome verkar vara lite mer än en halvpolerad teknisk demonstration av spetsiga pseudo-standarder.

2 Och jag kan vara partisk när jag säger detta, men det fungerar verkligen. Om din kod fungerar i andra webbläsare men inte i IE, är sannolikheten större att problemet ligger i din egen kod snarare än i IE10, jämfört med, säg, för 3 år sedan, med tidigare versioner av IE. Återigen, jag kan vara partisk, men låt oss vara ärliga: är inte du också det? Titta bara på dina kommentarer.

Svar #5

En bra plats att börja är dokumentationen för stöd av IE-standarder.

Här är hur man riktar in sig på IE10 i JavaScript:

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

Här är hur man riktar in sig på IE10 i CSS:

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

Om IE11 behöver filtreras eller återställas via CSS, se en annan fråga: Hur skriver man en CSS-hack för IE 11?

Svar #6

Båda lösningarna som postats här (med små ändringar) fungerar:

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

eller

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

Du inkluderar någon av ovanstående rader inuti head-taggen på din HTML-sida innan din CSS-länk. Och sedan i CSS-filen specificerar du dina stilar med "ie10"-klassen som förälder:

.ie10 .myclass1 { }

Och voilà! - andra webbläsare förblir intakta. Och du behöver inte jQuery. Du kan se exemplet på hur jag implementerade det här: http://kardash.net.

Svar #7

Jag har skrivit ett litet, vanligt JavaScript-plugin som heter Layout Engine, vilket låter dig detektera IE 10 (och alla andra webbläsare) på ett enkelt sätt som inte kan förfalskas, till skillnad från användaragentsniffning.

Det lägger till renderingsmotorns namn som en klass på html-taggen och returnerar ett JavaScript-objekt som innehåller leverantör och version (där det är lämpligt)

Kolla in mitt blogginlägg: http://mattstow.com/layout-engine.html och få koden på GitHub: https://github.com/stowball/Layout-Engine

Relaterade artiklar