CSS的白色空間：NOWRAP水平滾動的bug

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。

Live Demo