IE'S MOMENTARY LAPSE OF REASON:
The reason this occurs is because when you set the width of the iframe, the body of the included page inherits that width. So if the iframe has its width set to 400px, the body of the included page has its width set to 400px. This is not a problem unless the height of the page is greater than the height of the iframe. Then, the iframe takes up some of the width to use for the vertical scrollbar. So, the iframe has a width of 400px, but the width of the display box is only about 385px because the vertical scrollbar takes up about 15px. However, the body of the included page is still 400px - even if the included page's content only has a width of 1px. So, you end up with a horizontal scrollbar. Other browsers set the width of the body to the width of the viewable space. IE is retarded.
THE WORKAROUNDS:
There are three ways to get rid of the unnecessary horizontal scrollbar in IE (you only have to do one of the three):
1) Set the body style of the page that appears within the iframe to: display: inline; (<body style="display: inline"> or use a style sheet or set the style in the header) The reason this works is because it forces the body with to be only as wide as its content.
2) Set the doctype of the page that appears within the iframe to <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> (leave out the link to the dtd)
3) in the iframe tag, set the attribute: scrolling="yes" (This will cause the vertical scrollbar to always be present, but the horizontal scrollbar will appear only when necessary. The reason this works is because in this situation, IE allots space for the vertical scrollbar before setting the width of the included body.)
best: html { overflow-x: hidden; }
