css white-space：nowrap水平滚动bug [英] css white-space:nowrap horizontal scroll bug

问题描述

我有以下标记

<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>

当浏览器足够宽时，它看起来像这样

When the browser is wide enough, it looks like this

当浏览调整大小时，它看起来像这样

When the browse is resized narrow, it looks like this

我想要的灰色背景窄视图一直延伸到右边，当我滚动。

I want the gray background of the narrow view to extend all the way to the right when I scroll. What about my markup and css is causing this unwanted effect (occurs in Chrome, FF3 and IE8)

推荐答案

一个简单的解决方案是： do this：on #outer ，删除 width：100％并添加 float：left 。

An easy solution is to do this: on #outer, remove width: 100% and add float: left.

现场演示

这篇关于css white-space：nowrap水平滚动bug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！