IE9 Adding Inline Width to Elements when display settings at 125%

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.

The style will not be applied because it is missing `;` after `1500px` . or is it your mistake? — Mr_Green, Sep 24 '12 at 14:47
I can't repeat it on IE 9. Can you provide a link to an example? — Pavlo, Sep 24 '12 at 14:54
@venkateshwar - The `;` at the end is optional for the last style defined in the attribute. — techfoobar, Sep 24 '12 at 14:56
not seeing the same thing when I [recreate it](http://jsfiddle.net/Ku5DN/4/show/), maybe make an example page, a single div to test doesn't seem to be enough to recreate — MikeM, Sep 24 '12 at 15:08
Check out [this page](http://www.kurrenci.com) for an example of what I mean. If you're using IE9 and have the display settings (from the control panel, not the browser) set to 125% you should see horizontal scrolling. — Matt Waldron, Sep 24 '12 at 15:15

score 1 · Accepted Answer · answered Sep 25 '12 at 13:43

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.

score 0 · Answer 2 · edited May 23 '17 at 11:57

Yep or if you want to be more selective to width and height

jQuery(document).ready(function () {
    removeInlineWidthHeightElements($('#main'));
});

function removeInlineWidthHeightElements(element) {
    element.attr('style', function (i, style) {
        return style.replace(/width[^;]+;?/g, '').replace(/height[^;]+;?/g, '');
    });
}

Is it possible to remove inline styles with jQuery?

IE9 Adding Inline Width to Elements when display settings at 125%

2 Answers2