Question

For some reason, when a user has their display set to 125% from the Control panel, IE9 will add extra width inline to elements like so:

<div class="container" id="main" style="width: 1500px">
<!-- Code goes here-->
</div>

The inline style above (with the width) is the one added by IE9. IE8 does not have this problem, and it’s definitely triggered by setting the Windows display settings to 125%. Chrome and Firefox display things properly without the extra style too. Don’t suppose anybody has a workaround or fix for this? Can’t control what settings the users have, but I’ve seen other sites render properly.

Answer 1

Ok, so I solved this with a conditional comment and a bit of jQuery:

<!--[if IE 9]>
  <script type="text/javascript">
      window.onload = function () {
        if ( $('#main').attr('style') !== 'undefined' ) {
          $('#main').removeAttr('style');
        }
      }
  </script>
<![endif]-->

Basically, it checks to see if IE put a “style” attribute on the offending element, and if so, it removes the attribute.