假设你有一些样式和标记:
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实现相同的结果。来看看。
经过一番认真的搜索，我似乎找到了我问题的答案:
来自: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。
我在尝试构建一个固定定位的边栏时就遇到过这个问题，边栏边界外显示的边栏包含垂直可滚动的内容和嵌套的绝对定位子栏。
我的方法包括分别应用:
侧栏元素的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>
