it-swarm.com.de

Wie kann ich in bestimmten Situationen nur Internet Explorer 10 als Ziel verwenden, z. B. Internet Explorer-spezifisches CSS oder Internet Explorer-spezifischer JavaScript-Code?

Wie kann ich in bestimmten Situationen nur Internet Explorer 10 als Ziel verwenden, z. B. Internet Explorer-spezifisches CSS oder Internet Explorer-spezifischer JavaScript-Code?

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 den <html lang="en" class="no-js"> anstelle von <html class="no-js ie10" lang="en">.

153
trusktr

Vielleicht können Sie so etwas wie jQuery 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.

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

62
Max Sohrt

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

So richten Sie Internet Explorer 9, 10 und 11 an (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 richten Sie den Edge-Browser an:

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

Quellen:

128
Roni

Ich habe auf this site eine Lösung gefunden, wo jemand einen wertvollen Kommentar hatte :

Die Lösung ist:

if (Function('/*@cc_on return [email protected]*/')()){
    document.documentElement.className+=' ie10';
}

Es

  • benötigt keine bedingten Kommentare;
  • funktioniert auch bei Komprimierung/Verarbeitung von Kommentaren;
  • keine ie10-Klasse in Internet Explorer 11 hinzugefügt;
  • wahrscheinlicher, dass Internet Explorer 11 im Internet Explorer 10-Kompatibilitätsmodus ordnungsgemäß funktioniert.
  • benötigt kein eigenständiges Skript-Tag (kann einfach zu anderem JavaScript-Code im Kopf hinzugefügt werden).
  • jQuery braucht nicht zum Testen
110
Willem de Wit

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

Beachten Sie jedoch, dass bedingte Kompilierung in JScript weiterhin unterstützt wird, wie in den Kommentaren sowie in den neueren Antworten gezeigt. Es wird auch in der endgültigen Version nicht verschwinden, im Gegensatz zu jQuery.browser . Und natürlich bleibt User-Agent-Sniffing nach wie vor fragil und sollte unter keinen Umständen verwendet werden.

Wenn Sie wirklich auf IE10 abzielen müssen, verwenden Sie entweder eine bedingte Kompilierung, die möglicherweise in naher Zukunft noch unterstützt wird, oder - wenn Sie diesbezüglich Abhilfe schaffen können - eine Feature-Erkennungsbibliothek wie Modernizr anstelle von (oder in Verbindung damit mit) Browsererkennung. Sofern für Ihren Anwendungsfall kein Noscript erforderlich ist oder der IE10 nicht auf der Serverseite unterstützt wird, ist das Schnüffeln durch Benutzeragenten eher ein Kopfzerbrechen als eine praktikable Option.

Klingt ziemlich umständlich, aber denken Sie daran, dass ein moderner Browser den heutigen Webstandards in hohem Maße entspricht1Vorausgesetzt, Sie haben interoperablen Code geschrieben, der in hohem Maße standardkonform ist, sollten Sie keinen speziellen Code für IE10 beiseite legen müssen, es sei denn, dies ist unbedingt erforderlich, d. h Es soll in Verhalten und Rendering anderen Browsern ähneln.2 Und es klingt weit hergeholt, angesichts der Geschichte des IE, aber wie oft haben Sie damit gerechnet, dass Firefox oderChromesich auf die gleiche Weise verhalten, nur um bestürzt zu werden?

Wenn Sie einen berechtigten Grund haben , auf bestimmte Browser abzuzielen, sollten Sie diese mit den anderen Tools, die Ihnen zur Verfügung stehen, ausspionieren. Ich sage nur, dass es heute viel schwieriger sein wird, einen solchen Grund zu finden, als es früher war, und darauf können Sie sich wirklich nicht verlassen.


1Nicht nur IE10, sondern auch IE9 und sogar IE8, die die meisten der ausgereiften CSS2.1-Standards weitaus besser verarbeiten als Chrome, einfach weil IE8 so auf die Einhaltung von Standards ausgerichtet war (zu diesem Zeitpunkt war CSS2.1 mit nur geringfügigen Unterschieden zu bereits ziemlich stabil heutige Empfehlung), während Chrome anscheinend kaum mehr als eine halbglänzende technische Demo der neuesten Pseudo-Standards ist.

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

62
BoltClock

Ein guter Anfang ist die IE - Dokumentation zur Unterstützung von Standards

So richten Sie IE10 in JavaScript an:

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

So richten Sie IE10 in CSS an:

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

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

36
Paul Sweatte

Ich habe ein kleines Vanilla JavaScript-Plugin mit dem Namen Layout Engine geschrieben, mit dem Sie die Erkennung von IE 10 (und jeden anderen Browser) auf einfache Weise durchführen 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 (sofern zutreffend).

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

11
Matt Stow

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

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

oder

<script>if(Function('/*@cc_on return [email protected]*/')()){document.documentElement.className='ie10';}</script>

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

.ie10 .myclass1 { }

Und voilà! - andere Browser bleiben erhalten. Und du brauchst kein jQuery. Das Beispiel, wie ich es implementiert habe, kann man hier sehen: http://kardash.net .

11
Eugene Kardash

Ich verwende dieses Skript - es ist veraltet, aber effektiv bei der Ausrichtung auf ein separates Internet Explorer 10-Stylesheet oder eine JavaScript-Datei, die enthalten ist nur dann, wenn der Browser Internet Explorer 10 ist, genau wie bei bedingten Kommentaren . Es ist kein jQuery oder ein 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 >
7
Deborah

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" />
}
6

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 Leute erwähnt haben, würde ich stattdessen immer die Funktionserkennung empfehlen.

5
dave1010

Wenn Sie IE 10 mit Vanilla JavaScript anvisieren möchten, sollten Sie die CSS-Eigenschaftserkennung ausprobieren: 

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

CSS-Eigenschaften

Anstelle von msTouchAction können Sie auch eine dieser CSS-Eigenschaften verwenden, da diese derzeit nur in IE 10 verfügbar sind. Dies kann sich jedoch in der 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. 

4
TimPietrusky

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*/
}
3
steven iseki

clipBoardData ist eine Funktion, die nur im IE verfügbar ist. Wenn Sie also alle Versionen von IE anvisieren möchten, können Sie sie verwenden

<script type="text/javascript">
if (window.clipboardData)
            alert("You are using IE!");
</script>
3
Njaal Gjerde

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

1
Astrotim

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 Sie können es immer mit einer einfachen Bedingung überprüfen. Die globale Variable isIE ist undefiniert, wenn es sich nicht um einen IE handelt. Andernfalls wird die Versionsnummer angegeben. So können Sie problemlos 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;
}());
1
Jan.

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

1

Für mich funktioniert der folgende Code gut, 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 sich um ein Update von ie11 handelt ...

0
Alex

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 Stil:

.ie10 .some-class span{
    .......
}
.ie8 .some-class span{
    .......
}

verwenden Sie babel oder TypeScript, 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;
};

0

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'

Ändern Sie also /Trident/g durch /Trident/x.0/g wo x = 4, 5, 6 oder 7 (oder möglicherweise 8 für die Zukunft).

0
Ender-events

Check out http://suhasrathod.wordpress.com/2013/04/29/ie10-css-hacks/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
       /* IE10-specific styles go here */
}
0
Tom Senner