IE8 max-width not 1170 - actual 1200px

[christiaank]

I've noticed the IE8 content area is wider than 1170 and actually rendering as 1200px wide. This is causing us issues as a site we're working on has a static full page background image which is defining/highlighting the content (container) area, which works on all browsers except IE8.

The 'content' column width is 1170 + 30px padding giving max-width of 1200px.

eg. IE8 container row = 1200px wide, col-lg-12 = 1200px wide or col-lg-8 = 800px wide + col-lg-4 = 400px wide.

I've attached example of browsers rendering a page from the docs to show size inconsistencies below.

[thezoggy]

what jquery and doctype you using?

[christiaank]

Latest jQuery (1.10), and HTML5 doctype - but as you can see (as per screenshot above), it's also happening on the actual Bootstrap site as well… so the issue isn't related to my particular site.

[thezoggy]

right, I was just curious because jquery recently changed how it calculated dimensions.. browsers do some funky things like rounding and taking in consideration the scroll bar..

Anyways, IE8 doesn't support max-width as well as most modern browsers.. see:

http://caniuse.com/#search=max-width
IE8 has some bugs with max-width/height combined with overflow: auto/scroll.

for more info.
http://lmgtfy.com/?q=IE8+has+some+bugs+with+max-width%2Fheight

[mdo]

Resolved in 0a78e79 (via #10406).