4

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");
}
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
QFDev
  • 8,668
  • 14
  • 58
  • 85
  • dup. http://stackoverflow.com/a/13954700/1538708 – adamb Mar 21 '13 at 14:56
  • 3
    IE10 doesn't support Conditional statements but this may help: http://www.impressivewebs.com/ie10-css-hacks/ – Billy Moat Mar 21 '13 at 14:56
  • $.browser is deprecated and removed from latest jquery version http://api.jquery.com/jQuery.browser/ – xec Mar 21 '13 at 15:37
  • Thanks xec, I believe we are using 1.8 but I will look into this. Do you know of an alternative method? – QFDev Mar 21 '13 at 15:49
  • 1
    @QF_Developer yes, you can look at `navigator.userAgent` like i posted in my answer :) - user agent sniffing is generally a bad thing, but the way you've outlined the question it seems like the most direct approach. The cleaner solution would be to find out why the margin is breaking the menu, but we would need a lot more information. – xec Mar 21 '13 at 15:54

1 Answers1

8

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;
}
Community
  • 1
  • 1
xec
  • 17,349
  • 3
  • 46
  • 54
  • Yes, I'm also using JQuery so I could selectively modify the css style. I'm currently testing this option. – QFDev Mar 21 '13 at 15:16