假设你有一些样式和标记:

ul { white-space: nowrap; overflow-x: visible; overflow-y: hidden; /* added width so it would work in the snippet */ width: 100px; } li { display: inline-block; } <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div>

当你看到这个。<ul>在底部有一个滚动条,尽管我已经为溢出x/y指定了可见和隐藏值。

(Chrome 11和opera (?))

我猜一定有一些w3c规范或什么东西告诉这发生了,但对于我的生活,我不明白为什么。

JSFiddle

更新:-我找到了一种方法,通过添加另一个元素包裹在ul实现相同的结果。来看看。


当前回答

我使用了内容+包装器的方法……但我做了一些与之前提到的不同的事情:我确保我的包装器的边界不在我想要显示的方向上与内容的边界对齐。

重要提示:根据位置、overflow-*等各种CSS组合,在一个浏览器或另一个浏览器上使用内容+包装器、相同边界的方法是很容易的,但我从来没有使用过这种方法来让它们都正确(Edge、Chrome、Safari等)。

但当我有这样的东西:

# hack_wrapper { 位置:绝对的; 宽度:100%; 高度:100%; overflow-x:隐藏; } # content_wrapper { 位置:绝对的; 宽度:100%; 高度:15%; 溢出:可见; } <!——#hack_wrapper专门为此目的创建的div——> < div id = " hack_wrapper " > < div id = " content_wrapper " > ... 这是一个有太多横向内容的例子……太多太多太多的内容了。 < / div > < / div >

... 所有的浏览器都很满意。

其他回答

如果你只想让第一行可见(但仍然需要溢出),一个小“hack”非常有效:

将间隙设置得很高,这样你就可以确定第二行被推出屏幕-例如:

gap: 10000rem;

它真的很俗气,但对于需要溢出菜单的桌面导航之类的东西非常有用。

我使用了内容+包装器的方法……但我做了一些与之前提到的不同的事情:我确保我的包装器的边界不在我想要显示的方向上与内容的边界对齐。

重要提示:根据位置、overflow-*等各种CSS组合,在一个浏览器或另一个浏览器上使用内容+包装器、相同边界的方法是很容易的,但我从来没有使用过这种方法来让它们都正确(Edge、Chrome、Safari等)。

但当我有这样的东西:

# hack_wrapper { 位置:绝对的; 宽度:100%; 高度:100%; overflow-x:隐藏; } # content_wrapper { 位置:绝对的; 宽度:100%; 高度:15%; 溢出:可见; } <!——#hack_wrapper专门为此目的创建的div——> < div id = " hack_wrapper " > < div id = " content_wrapper " > ... 这是一个有太多横向内容的例子……太多太多太多的内容了。 < / div > < / div >

... 所有的浏览器都很满意。

另一个廉价的黑客,似乎可以达到目的:

风格= " padding-bottom: 250 px;Margin-bottom: -250px;"在垂直溢出被切断的元素上,250表示你需要的下拉框像素,等等。

现在有一种新的方法来解决这个问题——如果你从需要overflow-y可见的容器中删除position: relative,你可以让overflow-y可见而overflow-x隐藏,反之亦然(有overflow-x可见和overflow-y隐藏,只是确保具有可见属性的容器不是相对定位的)。

查看这篇文章的CSS技巧更多的细节-它为我工作:https://css-tricks.com/popping-hidden-overflow/

经过一番认真的搜索,我似乎找到了我问题的答案:

来自:http://www.brunildo.org/test/Overflowxy2.html

在Gecko, Safari, Opera中,“可见” 与连用时也变成auto ' hidden '(换句话说就是' visible ') 和组合时变成auto 还有什么不同的吗 “可见的”)。Gecko 1.8, Safari 3, Opera 9.5是相当一致的。

W3C规范还说:

' overflow-x '的计算值 ' overflow-y '和their是一样的 指定的值,除了一些 与“visible”的组合则不是 可能:如果指定为 ' visible '另一个是' scroll '或者 auto,然后visible设为 “汽车”。的计算值 ' overflow '等于computed 如果' overflow-y '则' overflow-x '的值 是一样的;否则就是对 ' overflow-x '的计算值 “overflow-y”。

短版:

如果你对overflow-x或overflow-y使用了visible,而对另一个使用了非visible,则可见值将被解释为auto。