I've encountered a strange issue with the vertical scroll bar on IE9 when using a div with a fixed position and overflow: auto set on the div.
See the case here using IE9 and shrink the window height down to a small size.
http://bytiger.com/add/ie9_div_test.html
I can confirm that this doesn't occur on IE8.
Does anyone know a reasonable hack around this? I've tried setting the width to the window width, but it seems that it purposesfully subtracts a scrollbar width from the size of the div. I would like to see if there is a solution that doesn't have to calculate this constant or hardcode it and adding this back to the calculated width.
Cheers!
EDIT: Jsfiddle doesn't seem to exhibit the problem... so that can be a big hint as to what might be going on.
http://jsfiddle.net/dvAKW/
To prevent scrolling with this property, just apply the rule overflow: hidden to the body (for the entire page) or a container element. This hides all content beyond the element's border. Alternatively, use overflow: visible to show content that extends beyond the borders of the container.
The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit. If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar.
Add CSS. Set the overflow property to “auto”. This value adds scrollbar when the content overflows.
Seems like IE9 doesn't handle the box-sizing property correctly - changing it from "border-box" to "content-box" or leaving it blank will fix your problem.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With