html - IE7 中奇怪的布局行为(滚动条出现在不应该出现的地方)

这是代码:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            html, body
            {
                margin: 0px;
                padding: 0px;
            }
            #pageContainer {
                min-width: 100%;
                float: left;
                background-color: red;
            }
            #leftColumn {
                float: left;
                background-color: lime;
            }
            #rightColumn {
                position: relative;
            }
        </style>
    </head>
    <body>
        <div id="pageContainer">
            <div id="leftColumn">Left column</div>
            <div id="rightColumn">Right column</div>
        </div>
    </body>
</html>

在 IE8/Opera/FF 上一切看起来都很好。如果我使用 IE8 并打开 IE7 模式(符合标准)，突然会出现水平滚动条。令人怀疑的是它和左栏一样大。有什么想法吗？!

Example