假设你有一些样式和标记:
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: visible属性
一个overflow-y: auto属性到侧边栏内部包装器
请查看下面的示例或在线代码库。
html {
min-height: 100%;
}
body {
min-height: 100%;
background: linear-gradient(to bottom, white, DarkGray 80%);
margin: 0;
padding: 0;
}
.sidebar {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 200px;
overflow: visible; /* Just apply overflow-x */
background-color: DarkOrange;
}
.sidebarWrapper {
padding: 10px;
overflow-y: auto; /* Just apply overflow-y */
height: 100%;
width: 100%;
}
.element {
position: absolute;
top: 0;
right: 100%;
background-color: CornflowerBlue;
padding: 10px;
width: 200px;
}
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<div class="sidebar">
<div class="sidebarWrapper">
<div class="element">
I'm a sidebar child element but I'm able to horizontally overflow its boundaries.
</div>
<p>This is a 200px width container with optional vertical scroll.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</div>
我最初发现了一个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;
}
