One of the beautiful idiosyncrasies (some calls ‘em bugs I call ‘em idiosyncrasies) of IE that I just had the pleasure of dealing with has to do with the use of the width: 100% property.
Basically, I fixated the html and body elements, then built a 100%, 100% height div (no padding, margins) inside it so that I could better control the scrolling of my page compared to other fixed objects.
At the top of that replacement div, I had 3 linear objects making a header. One was 110px tall at the top, the next was 22px immediately below that (top: 110px), and the next was 10px, immediately below that (top: 132px).
Each of these elements was 100% width (entire width of the viewport). For some bizare, wacky reason, I kept getting a horizontal scroll bar, even though everything fit on the page.
It was my top element, which made no sense to me because they were all 3 position: absolute; width: 100%; and fixed height, just with varied positioning. In debugging, I was stumped, as it didn’t matter where I put the objects, in what order, etc. That top div (the one that was originally on top) was always wider than the screen — in fact, it was wider by the width of the scrollbar. For some reason, it was getting its width of the viewport from BEHIND the vertical scrollbar, whereas the other 2 for some reason did as they should and excluded the width of the vertical scrollbar in their calculations.
Then I realized, but “no it couldn’t be?!?” — the 2 divs that were working properly had a background image. More specifically, their background was defined as background: #xxxxxx url(/file/location) repeat-x; but the other div simply had background-color: #111111; as its definition.
So for some reason, using background: vs. background-color: causes the always intelligent IE to change its interpretations. Go figure right?
So the workaround? Use background: instead.
background: #111111 url() no-repeat;
And voila, it was fixed.
I HATE YOU IE.