Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Conditional CSS for Internet Explorer 10 only [duplicate]

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");
}
like image 920
QFDev Avatar asked Feb 17 '23 02:02

QFDev


1 Answers

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;
}
like image 66
xec Avatar answered Mar 02 '23 17:03

xec