css - css white-space：nowrap水平スクロールのバグ

Question

私は次のマークアップを持っています

<style type="text/css">
    #outer
    {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        width:100%;
        white-space:nowrap;
    }

    #inner
    {
        background-color:#CCCCCC;
        margin:0px 4px 0px 4px;
        padding:5px 5px 0px 5px;
        border:1px solid #9A9A9A;
        border-width:1px 1px 0px 1px;
    }

</style>

<div id="outer">
    <div id="inner">
    TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
    </div>
</div>

ブラウザの幅が十分に広い場合は、次のようになります。

ブラウズのサイズを狭く変更すると、次のようになります。

スクロールすると、狭いビューの灰色の背景が右端まで伸びるようにします。私のマークアップとcssは、この望ましくない影響を引き起こしています（Chrome、FF3、IE8で発生します）

Answer 1

簡単な解決策はこれを行うことです：で#outer、削除width: 100%して追加しfloat: leftます。

ライブデモ