Wie kann ich nur auf Internet Explorer 10 für bestimmte Situationen wie Internet Explorer-spezifisches CSS oder Internet Explorer-spezifischen JavaScript-Code abzielen?

160

Wie kann ich nur auf Internet Explorer 10 für bestimmte Situationen wie Internet Explorer-spezifisches CSS oder Internet Explorer-spezifischen JavaScript-Code abzielen?

Ich habe es versucht, aber es funktioniert nicht:

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

Internet Explorer 10 ignoriert die bedingten Kommentare und verwendet die <html lang="en" class="no-js">anstelle von <html class="no-js ie10" lang="en">.

javascript html css internet-explorer-10 conditional-comments trusktr
quelle
8
Ich denke, eine bessere Frage wäre: Wie kann ich erreichen, dass dieses CSS in beiden Browsern gleich aussieht?
BentOnCoding
12
IE10 PP4 unterstützt die @cc_onAnweisung weiterhin . Um festzustellen, ob IE10 unterstützt wird oder nicht, können Sie den folgenden Code verwenden : <!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className+=' ie10';}</script><!--<![endif]-->. (Ich habe dies als Kommentar gepostet, da sich der IE noch in der Entwicklung befindet, sodass nicht bekannt ist, ob die endgültige Version diese Funktion ebenfalls unterstützt.)
Rob W
15
@RobW - Ihr Beispielcode ist falsch, sobald ie11 aus ist. Verbesserte Version: <script>if(Function('/*@cc_on return document.documentMode===10@*/')()){document.documentElement.className+=' ie10';}</script>Verbesserungen: Benötigt keine bedingten Kommentare; funktioniert auch, wenn das Komprimieren / Verarbeiten von Kommentaren entfernt wird; keine Klasse für ie11 hinzugefügt; funktioniert mit ie11, das im ie10-Kompatibilitätsmodus ausgeführt wird; benötigt kein eigenständiges Skript-Tag (kann einfach zu anderem Javascript im Kopf hinzugefügt werden).
Robocat
2
Beispiel des obigen Code-Snippets: jsbin.com/upofoq/2
Robocat
8
Eine allgemeinere Lösung ist: if(document.documentMode) document.documentElement.className+=' ie'+document.documentMode+'mode';- die 90% der Probleme löst (manchmal schlagen Kompatibilitätsmodi fehl, in diesem Fall benötigen Sie zusätzlich eine weitere Korrekturstufe).
Robocat

Antworten:

65

Vielleicht können Sie jQuery wie folgt ausprobieren:

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

Um diese Methode verwenden zu können, müssen Sie die jQuery Migrate-Bibliothek einschließen, da diese Funktion aus der jQuery-Hauptbibliothek entfernt wurde.

Hat für mich ganz gut geklappt. Aber sicherlich kein Ersatz für bedingte Kommentare!

Max Sohrt
quelle
3
Ich bin nicht sicher über euch, aber ich muss es verwenden, == '10.0'damit es funktioniert
lulalala
112
Warnung: jQuery.browserist in der aktuellen Version von jQuery (1.9) ohne Plugin nicht mehr verfügbar. blog.jquery.com/2013/01/15/…
dave1010
2
Ich würde empfehlen: if (jQuery.browser.msie && jQuery.browser.version < 10) { // do what you will here }Beachten Sie die Version <10 , um ältere Versionen von IE zu erkennen. IE10 und höher funktioniert gut mit all meinen CSS3, HTML5, JQuery usw.
Dan Mantyla
1
@dan, da bedingte Kommentare in allen IE-Browsern unter 10 funktionieren, verwenden Sie sie, anstatt Ihre JS für alle Browser zu überladen. Sagen Sie einfach <! - [if lte IE 9]> und Sie können auf alle IE-Versionen unter 10 abzielen. Kein JS erforderlich.
Edhurtig
1
@ Marc-AndréLafortune spricht einen guten Punkt an. Als Faustregel sollten Sie immer den Operator === und nicht == verwenden. Wenn Sie Javascript schreiben, müssen Sie dies berücksichtigen. stackoverflow.com/questions/359494/…
Stewart
132

Ich würde kein JavaScript navigator.userAgentoder $ .browser (das verwendet navigator.userAgent) verwenden, da es gefälscht werden kann.

So zielen Sie auf Internet Explorer 9, 10 und 11 ab (Hinweis: auch das neueste Chrome):

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

So zielen Sie auf Internet Explorer 10 ab:

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

So zielen Sie auf den Edge-Browser:

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

Quellen:

Roni
quelle
Das ist echt schön. Aber wie besorgt sollten wir sein, wenn wir verschiedene Dokumentmodi gegen Browsermodi im IE testen? In welchen Situationen können wir erwarten, dass Online-Benutzer einen anderen Dokumentmodus als ihren aktuellen Browsermodus verwenden?
Klewis
Normalerweise ändern Benutzer den Dokumentmodus nicht. Sie können, aber ich bin auf keine Site gestoßen, bei der der Benutzer den Dokumentmodus ändern musste. Wenn Sie den richtigen DOCTYPE verwenden, ist dies überhaupt kein Problem.
Roni
3
Sie sind mein Held! Nur eine Anmerkung, dies hat auch einige Probleme in IE11 behoben
locrizak
8
Dies betrifft auch IE11 - wenn Sie also nach einer Lösung suchen, die nur auf IE9 / 10 abzielt, funktioniert diese nicht :-(
Lukasz Lenart
1
Was meinst du mit "alle erkennen den Browser über navigator.userAgent"? Die bedingte Kompilierung ist eine integrierte Funktion der JScript-Laufzeit, die nicht über die Benutzeragentenzeichenfolge gefälscht werden kann.
BoltClock
111

Ich habe auf dieser Seite eine Lösung gefunden, bei der jemand einen wertvollen Kommentar hatte :

Die Lösung ist:

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

Es

  • benötigt keine bedingten Kommentare;
  • funktioniert auch, wenn das Komprimieren / Verarbeiten von Kommentaren entfernt wird;
  • In Internet Explorer 11 wurde keine ie10-Klasse hinzugefügt.
  • funktioniert eher wie vorgesehen mit Internet Explorer 11, das im Internet Explorer 10-Kompatibilitätsmodus ausgeführt wird;
  • benötigt kein eigenständiges Skript-Tag (kann einfach zu anderem JavaScript-Code im Kopf hinzugefügt werden).
  • benötigt jQuery nicht zum Testen
Willem de Wit
quelle
3
@ dave1010 Benutzeragenten können leicht gefälscht werden. Bedingte Kommentare werden nur von der JScript-Engine unterstützt, die nur in IE4 + (einschließlich 10) verfügbar ist.
Rob W
2
@ dave1010 Das Schreiben eines funktionierenden Parsers, der das tut, was Sie beschreiben, ist schwierig und äußerst unwahrscheinlich. Jeder, der absichtlich eine solche Erweiterung erstellt und installiert, beabsichtigt höchstwahrscheinlich, sich wie ein IE zu verhalten (möglicherweise für automatisierte Testzwecke in Nicht-Windows-Umgebungen?). In Browsern wird niemals 100% iges Vertrauen garantiert, aber Sie können sich ausreichend nähern. Bedingte Kommentare sind eine äußerst zuverlässige Methode zum Erkennen der JScript-Engine, die zufällig vom IE verwendet wird.
Rob W
3
Der einzige Nachteil, den ich sehen kann, ist, dass es js erfordert, was die Bedingungen nicht taten
James Westgate
4
Dies sollte die beste Antwort sein, und die JS-Anforderung sollte für IE10-Benutzer strittig sein. Wenn JS deaktiviert ist, ist es wahrscheinlich nur das NoScript-Addon. Ich denke, wir brauchen mehr öffentliche Aufklärung über die bloße Dummheit von NoScript (im Gegensatz zu vernünftigen Addons wie AdBlock oder Ghostery).
Iono
8
Ich würde vorschlagen, den vom Autor bereitgestellten alternativen Code zu verwenden, der if (/*@cc_on!@*/false && document.documentMode === 10) {}eval-Warnungen in Flusenprogrammen umgeht.
Ajbeaven
62

Internet Explorer 10 versucht nicht mehr, bedingte Kommentare zu lesen. Dies bedeutet, dass bedingte Kommentare wie jeder andere Browser behandelt werden: als normale HTML-Kommentare, die vollständig ignoriert werden sollen. Wenn Sie sich das in der Frage als Beispiel angegebene Markup ansehen, ignorieren alle Browser, einschließlich IE10, die grau hervorgehobenen Kommentarbereiche vollständig. Der HTML5-Standard erwähnt keine bedingte Kommentarsyntax, und genau aus diesem Grund haben sie beschlossen, die Unterstützung in IE10 einzustellen.

Beachten Sie jedoch, dass die bedingte Kompilierung in JScript weiterhin unterstützt wird, wie in den Kommentaren sowie in den neueren Antworten gezeigt. Im Gegensatz dazu wird es auch in der endgültigen Version nicht verschwindenjQuery.browser . Und natürlich ist das Schnüffeln von Benutzeragenten nach wie vor fragil und sollte unter keinen Umständen verwendet werden.

Wenn Sie wirklich auf IE10 abzielen müssen, verwenden Sie entweder die bedingte Kompilierung, die möglicherweise in naher Zukunft noch unterstützt wird, oder - wenn Sie helfen können - eine Feature-Erkennungsbibliothek wie Modernizr anstelle (oder in Verbindung mit) der Browsererkennung. Sofern Ihr Anwendungsfall kein Noscript erfordert oder IE10 auf der Serverseite unterstützt, wird das Sniffing von Benutzeragenten eher Kopfschmerzen als eine praktikable Option sein.

Klingt ziemlich umständlich, aber denken Sie daran, dass Sie als moderner Browser, der den heutigen Webstandards 1 in hohem Maße entspricht, vorausgesetzt, Sie haben interoperablen Code geschrieben, der in hohem Maße Standards entspricht, keinen speziellen Code für IE10 beiseite legen müssen, es sei denn, dies ist unbedingt erforderlich. dh es soll in Bezug auf Verhalten und Rendering anderen Browsern ähneln. 2 Und es klingt angesichts der Geschichte des IE weit hergeholt, aber wie oft haben Sie erwartet, dass sich Firefox oder Chrome genauso verhalten, nur um mit Bestürzung konfrontiert zu werden?

Wenn Sie tun einen legitimen Grund müssen bestimmte Browser werden Targeting, mit allen Mitteln sie mit den anderen Tools , die Ihnen gegeben erschnüffeln. Ich sage nur, dass es Ihnen heute viel schwerer fallen wird, einen solchen Grund zu finden als früher, und darauf können Sie sich wirklich nicht verlassen.

1 Nicht nur IE10, sondern auch IE9 und sogar IE8, das den größten Teil des ausgereiften CSS2.1-Standards weitaus besser handhabt als Chrome, einfach weil IE8 so stark auf die Einhaltung von Standards ausgerichtet war (zu diesem Zeitpunkt war CSS2.1 mit nur geringen Unterschieden bereits ziemlich stabil nach der heutigen Empfehlung), während Chrome kaum mehr als eine halbglanzpolierte Tech-Demo modernster Pseudo-Standards zu sein scheint.

2 Und ich bin vielleicht voreingenommen, wenn ich das sage, aber es ist verdammt sicher. Wenn Ihr Code in anderen Browsern funktioniert, jedoch nicht im IE, ist die Wahrscheinlichkeit, dass es sich um ein Problem mit Ihrem eigenen Code und nicht mit IE10 handelt, weitaus besser als beispielsweise vor 3 Jahren mit früheren Versionen des IE. Auch hier bin ich vielleicht voreingenommen, aber seien wir ehrlich: Bist du nicht auch? Schauen Sie sich einfach Ihre Kommentare an.

BoltClock
quelle
20
Chhhh, ja, IE10 bleibt immer noch weit hinter Webkit und Gecko zurück. Ich habe etwas CSS, das im Webkit gut aussieht und im IE10 abscheulich ist. Wenn ich keine Möglichkeit finde, die Stile selektiv anzuwenden, muss ich solche Stile aufgeben. :(
trusktr
2
Es ist erwähnenswert, dass bedingte Kommentare in IE10 entfernt wurden, da es jetzt einen HTML5-Parser gibt. Bedingte Kommentare sind gemäß dem HTML5-Parsing-Algorithmus nicht gültig. Siehe Legacy-Funktionen Abschnitt von blogs.msdn.com/b/ie/archive/2011/07/06/…
David Storey
3
@trusktr Wenn Sie es gut codieren, wird es in allen neuesten Browsern gut aussehen.
Klevis Miho
10
@KlevisMiho Nicht wahr, Chrome und Firefox unterstützen Funktionen, die der IE nicht bietet, selbst wenn sie gut codiert sind. Wenn Sie "nur allgemeine Funktionen verwenden" meinen, dann ist das nicht ganz dasselbe wie "Code gut".
Trusktr
5
@ Dan Mantyla: In diesem Fall<!--[if !IE]><!-->stuff you don't want IE9 and below to see<!--<![endif]-->
BoltClock
36

Ein guter Anfang ist die IE Standards Support Documentation .

So richten Sie IE10 in JavaScript aus:

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

So zielen Sie auf IE10 in CSS ab:

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

Falls IE11 über CSS gefiltert oder zurückgesetzt werden muss, lesen Sie eine andere Frage: Wie schreibe ich einen CSS-Hack für IE 11?

Paul Sweatte
quelle
5
Ihre CSS-Lösung betrifft auch IE11: \
Lukasz Lenart
11

Beide hier veröffentlichten Lösungen (mit geringfügigen Änderungen) funktionieren:

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

oder

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

Sie fügen eine der obigen Zeilen in das Head-Tag Ihrer HTML-Seite vor Ihrem CSS-Link ein. Und dann geben Sie in der CSS-Datei Ihre Stile mit der Klasse "ie10" als übergeordnetes Element an:

.ie10 .myclass1 { }

Und voilà! - Andere Browser bleiben erhalten. Und Sie brauchen jQuery nicht. Das Beispiel, wie ich es implementiert habe, sehen Sie hier: http://kardash.net .

Eugene Kardash
quelle
11

Ich habe ein kleines Vanille-JavaScript-Plugin namens Layout Engine geschrieben , mit dem Sie IE 10 (und jeden anderen Browser) auf einfache Weise erkennen können, die im Gegensatz zum Sniffing von Benutzeragenten nicht gefälscht werden kann.

Es fügt den Namen der Rendering-Engine als Klasse zum HTML-Tag hinzu und gibt ein JavaScript-Objekt zurück, das den Hersteller und die Version enthält (falls zutreffend).

Schauen Sie sich meinen Blog-Beitrag an: http://mattstow.com/layout-engine.html und holen Sie sich den Code auf GitHub: https://github.com/stowball/Layout-Engine

Matt Stow
quelle
7

Ich verwende dieses Skript - es ist veraltet, aber effektiv bei der Ausrichtung auf ein separates Internet Explorer 10-Stylesheet oder eine JavaScript-Datei, die nur enthalten ist, wenn der Browser Internet Explorer 10 ist, genau wie bei bedingten Kommentaren. Es ist kein jQuery oder anderes Plugin erforderlich.

<script>
    /*@cc_on
      @if (@_jscript_version == 10)
          document.write(' <link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />');
      @end
    @*/
</script >
Deborah
quelle
2
Cool. Könnten Sie ein paar Informationen zu diesen @ -Statements hinzufügen?
trusktr
6

Sie können PHP verwenden, um ein Stylesheet für IE 10 hinzuzufügen

Mögen:

if (stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10')) {
    <link rel="stylesheet" type="text/css" href="../ie10.css" />
}
Lenny Bruyninckx
quelle
2
Es macht keinen Sinn, die Saite zu erhöhen, da bei Stripos nicht zwischen Groß- und Kleinschreibung unterschieden wird;)
mgutt
2
Ich versuche immer, aber dann denke daran, dass es kaputt geht, wenn sich am Frontend ein CDN / Cache / Proxy befindet.
Johan
5

Wenn Sie dies tun müssen, können Sie die Zeichenfolge des Benutzeragenten in JavaScript überprüfen:

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

Wie andere bereits erwähnt haben, würde ich stattdessen immer die Feature-Erkennung empfehlen.

dave1010
quelle
Wofür sind die `` !! `?
Francisco Corrales Morales
4
String.match()Gibt ein Array für eine Übereinstimmung oder null zurück, wenn dies nicht der Fall ist. !(String.match())Lässt es für eine Übereinstimmung falsch oder für keine Übereinstimmung wahr zurückgeben. !(!(String.match()))Lässt es für eine Übereinstimmung wahr oder für keine Übereinstimmung falsch zurückgeben. !(!(something))oder !!somethingkonvertiert einfach irgendetwas in ein boolesches wahr / falsch. stackoverflow.com/questions/784929/…
dave1010
@FranciscoCorralesMorales Oh, wie oft wurde ich gefragt, wann mein Code überprüft wird. :) Als Erweiterung des großartigen Kommentars von dave1010 kann es verwendet werden, um "wahrheitsgemäße" oder "falsche" Werte in einen inneren booleanWert zu zwingen , z var name = 'me', hasName = !!name;.
WynandB
4

Wenn Sie IE 10 mit Vanilla JavaScript als Ziel festlegen möchten, sollten Sie die Erkennung von CSS-Eigenschaften ausprobieren: 

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

CSS-Eigenschaften

Stattdessen msTouchActionkönnen Sie auch eine dieser CSS-Eigenschaften verwenden, da sie derzeit nur in IE 10 verfügbar sind. Dies kann sich jedoch in Zukunft ändern.

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

Testseite

Ich habe eine Testseite mit allen Eigenschaften von CodePen zusammengestellt.

TimPietrusky
quelle
3

clipBoardData ist eine Funktion, die nur im IE verfügbar ist. Wenn Sie also auf alle IE-Versionen abzielen möchten, können Sie diese verwenden

<script type="text/javascript">
if (window.clipboardData)
            alert("You are using IE!");
</script>
Njaal Gjerde
quelle
-1: aber was ist mit Versionen? Wie können Sie feststellen, welche Version ist?
Francisco Corrales Morales
Der Edge-Browser hat auch nicht "window.clipboardData"
AFD
@AFD Bei dieser Frage geht es um IE, nicht um Edge.
TylerH
3

CSS für IE10 + und IE9

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

@media screen\0 {
    /* IE8,9,10 styles*/
}
svnm
quelle
1

Sie können die Funktionserkennung verwenden, um festzustellen, ob der Browser IE10 oder höher ist.

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

Nur wahr wenn> IE9

George Filippakos
quelle
1

Conditionizr (siehe Dokumente) fügt Ihrem HTML-Element Browser-CSS-Klassen hinzu, einschließlich ie10.

Astrotim
quelle
1

Mit JavaScript:

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

Arbeit für alle IE.

IE08 => 'Trident/4.0'

IE09 => 'Trident/5.0'

IE10 => 'Trident/6.0'

IE11 => 'Trident/7.0'

So ändert /Trident/gvon /Trident/x.0/gwo x = 4, 5, 6oder 7(oder vielleicht 8für die Zukunft).

Ender-Ereignisse
quelle
1

Ich wollte nur meine Version der IE-Erkennung hinzufügen. Es basiert auf einem Snippet unter http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/ und wurde erweitert, um auch ie10 und ie11 zu unterstützen. Es erkennt IE 5 bis 11.

Alles was Sie tun müssen, ist es irgendwo hinzuzufügen und dann können Sie immer mit einer einfachen Bedingung überprüfen. Die globale Variable isIEist undefiniert, wenn es sich nicht um einen IE handelt, oder es handelt sich um die Versionsnummer. So können Sie ganz einfach Dinge wie if (isIE && isIE < 10)oder ähnliches hinzufügen .

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;
}());
Jan.
quelle
0

Für mich funktioniert der folgende Code einwandfrei, alle bedingten Kommentare funktionieren in allen IE-Versionen:

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

Ich bin unter Windows 8.1, nicht sicher, ob es mit dem ie11-Update zusammenhängt ...

Alex
quelle
1
Das (gt IE 11)Bit ist völlig unnötig. Sie können es auch einfach tun <!--[if !(IE)]<!-->.
BoltClock
BoltClock Wenn (gt IE 11) weggelassen wird und der Browser des Benutzers IE 12 ist (wenn er herauskommt), ist kein HTML-Element definiert.
Leonardo Gonzalez
0

So mache ich benutzerdefiniertes CSS für Internet Explorer:

In meiner JavaScript-Datei:

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

Und dann definieren Sie in meiner CSS-Datei jeden unterschiedlichen Stil:

.ie10 .some-class span{
    .......
}
.ie8 .some-class span{
    .......
}
Francisco Corrales Morales
quelle
0

Verwenden Sie Babel oder Typoskript, um diesen Code js zu konvertieren

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;
};
Erweitern Sie das Snippet

Aliaksandr Shpak
quelle
Hallo Aliaksandr, danke für die Idee! Ich bin mir nicht sicher, warum jemand abgestimmt hat, aber ich habe gestimmt, weil die Antwort zumindest ein hilfreicher Hinweis ist. Wer auch immer abstimmt, warum nicht einem neuen Benutzer mit hilfreichen Ratschlägen helfen?
Trusktr
-2

Diese Antwort brachte mich zu 90% dorthin. Den Rest meiner Antwort habe ich hier auf der Microsoft-Website gefunden .

Der folgende Code ist das, was ich verwende, um alle zu erreichen, dh indem ich eine .ie-Klasse hinzufüge <html>

Verwenden Sie jQuery (das .browser zugunsten von Benutzeragenten ab 1.9 veraltet hat, siehe http://api.jquery.com/jQuery.browser/ ), um eine .ie-Klasse hinzuzufügen:

// ie identifier
$(document).ready(function () {
  if (navigator.appName == 'Microsoft Internet Explorer') {
    $("html").addClass("ie");
  }
});
Bdanin
quelle
"was .browser in 1.9+ zugunsten von Benutzeragenten veraltet hat" Es heißt nicht "zugunsten von Benutzeragenten" - was auch immer das bedeutet - es heißt zugunsten der Funktionserkennung .
BoltClock
-2

Wenn es Ihnen nichts ausmacht, auf IE10 und höher sowie auf Nicht-IE-Browser abzuzielen, können Sie diesen bedingten Kommentar verwenden:

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

Abgeleitet von http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither

user1003757
quelle
1
Ich habe nicht -1 Ihre Antwort , aber der Link scheint etwas outd- acht -ed. Es ist auch erwähnenswert, dass OP nur für IE10 und IE10 gedacht ist. Unabhängig davon funktioniert Ihr Code-Snippet weder für IE10 und höher noch für andere Nicht-IE-Browser, da bedingte Kommentare nur in IE5 bis IE9 unterstützt werden.
WynandB
-2

Wenn Sie es wirklich müssen, können Sie bedingte Kommentare zum Funktionieren bringen, indem Sie die folgende Zeile hinzufügen <head>:

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

Quelle

nyuszika7h
quelle
-4

moderne lösung für css

html[data-useragent*='MSIE 10.0'] .any {
  your-style: here;
}
Raphael
quelle