css white-space: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.

现场演示