Conditional CSS for Internet Explorer 10 only

Question

Internet Explorer 10 violated my jQuery menu. I can fix this by applying a small revision to our CSS according to 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?

I know that sniffing the browser is not ideal, but it seems to work fine:

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

+4

QFDev Mar 21 '13 at 14:54

1 answer

xec · Accepted Answer · 2013-03-21T15:08:46+0000

Seeing that you are already relying on JavaScript for your menu, you can add a class to <body> using JavaScript code based on the userAgent string:

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

.. and then target Internet Explorer 10 in your CSS

 /*IE 10 only */ .ie10 .myClass { margin-top: 1px; }