Conditional CSS for Internet Explorer 10 only

19,247

Seeing as you're already relying on JavaScript for your menu, you could add a class to the <body> using JavaScript code based on the userAgent string:

JavaScript

if (navigator.userAgent.indexOf("MSIE 10") > -1) {
    document.body.classList.add("ie10");
}

..and then target Internet Explorer 10 in your CSS

CSS

/*IE 10 only */
.ie10 .myClass {
    margin-top: 1px;
}
Share:
19,247
QFDev
Author by

QFDev

Founder of QuickFile.co.uk cloud accounting software.

Updated on June 05, 2022

Comments

  • QFDev
    QFDev almost 2 years

    Internet Explorer 10 has broken my jQuery menu. I can fix this by applying a small revision to our CSS as per the example below.

    /* For Internet Explorer 10 ------*/
    margin-top: 1px;
    
    /* For all other browsers ------*/
    margin-top: 2px;
    

    Is there a way to apply these cases conditionally in my CSS include?

    I know browser sniffing is not ideal, but this seems to work fine:

    if ($.browser.msie  && parseInt($.browser.version, 10) === 10) {
        $(".jMenu li ul").css("margin", "1px");
    }