假设你有一些样式和标记:
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实现相同的结果。来看看。
我最初发现了一个CSS方式绕过这个时，使用循环jQuery插件。Cycle使用JavaScript将我的幻灯片设置为overflow: hidden，所以当我将图片设置为width: 100%时，图片看起来会垂直切割，所以我强迫它们可见!important，为了避免显示幻灯片动画，我设置了overflow: hidden到幻灯片的容器div。希望这对你有用。
更新-新的解决方案:
原来的问题-> http://jsfiddle.net/xMddf/1/
(即使我使用overflow-y: visible，它也变成了“auto”和“scroll”。)
#content {
height: 100px;
width: 200px;
overflow-x: hidden;
overflow-y: visible;
}
新的解决方案-> http://jsfiddle.net/xMddf/2/
(我发现了一种变通方法，使用包装器div对不同的DOM元素应用overflow-x和overflow-y，就像James Khoury在将可见和隐藏结合到单个DOM元素的问题上所建议的那样。)
#wrapper {
height: 100px;
overflow-y: visible;
}
#content {
width: 200px;
overflow-x: hidden;
}
经过一番认真的搜索，我似乎找到了我问题的答案:
来自: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。
