CSS overflow-x：visible; 和溢出 – Y：隐藏; 导致滚动条问题
假设你有一些风格和标记：
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>
当你查看这个。 即使我已经为溢出x / y指定了可见值和隐藏值， <ul>在底部有一个滚动条。
（在Chrome 11和opera（？）上观察）
我猜测一定有一些w3c规范或者其他什么东西可以告诉我这个事情发生，但是对于我来说，我不知道为什么。
的jsfiddle
更新： –我find了一种方法来达到相同的结果添加另一个元素包裹在ul 。 一探究竟。
经过一番认真的search，似乎我find了我的问题的答案：
从： http : //www.brunildo.org/test/Overflowxy2.html
在Gecko，Safari，Opera中，当与'hidden'结合时，'visible'变成'auto'（换句话说：'visible'与'visible'不同时与'other'结合成'auto'）。 其中Gecko 1.8，Safari 3，Opera 9.5相当一致。
另外W3C规范说：
“overflow-x”和“overflow-y”的计算值与它们的指定值相同，除了某些与“visible”的组合是不可能的：如果一个被指定为“visible”而另一个是“scroll”或'auto'，那么'visible'被设置为'auto'。 如果'overflow-y'是相同的，'overflow'的计算值等于'overflow-x'的计算值。 否则就是“overflow-x”和“overflow-y”的计算值对。
短版：
如果您正在使用visible的overflow-x或overflow-y以及其他visible值，则visible值将被解释为auto 。
我最初find一种CSS方式来绕过这个使用循环jQuery插件。 循环使用JavaScript来设置我的幻灯片overflow: hidden ，所以当设置我的图片为width: 100%的图片将看起来垂直切，所以我强迫他们与!important可见性，并避免显示幻灯片animation框我设置overflow: hidden到幻灯片的容器div。 希望对你有效。
更新 – 新的解决scheme：
原始问题 – > http://jsfiddle.net/xMddf/1/ （即使我使用overflow-y: visible它变成“汽车”，实际上“滚动”）。
#content { height: 100px; width: 200px; overflow-x: hidden; overflow-y: visible; }
新的解决scheme – > http://jsfiddle.net/xMddf/2/ （我发现了一个解决scheme，使用wrapper div将overflow-x和overflow-y应用于不同的DOM元素，正如James Khoury提出的将visible和hidden到一个DOM元素。）
#wrapper { height: 100px; overflow-y: visible; } #content { width: 200px; overflow-x: hidden; }
另一个便宜的黑客，这似乎是伎俩：
style="padding-bottom: 250px; margin-bottom: -250px;" 在垂直溢出被截断的元素上， 250代表你的下拉所需的像素数量等等。
我使用了content+wrapper方法… 但是我做了一些与前面提到的不同的东西：我确定我的包装器的边界没有与我希望显示的方向上的内容边界alignment 。
重要说明：根据position ， overflow-*等各种CSS组合，获取content+wrapper, same-bounds方法在一个浏览器或另一个浏览器上工作是很容易的，但是我永远不能使用这种方法来获取他们都正确（边缘，铬，Safari，…）。
但是当我有这样的东西：
<div id = "hack_wrapper" // created solely for this purpose style = "position:absolute; width:100%; height:100%; overflow-x:hidden;"> <div id = "content_wrapper" style = "position:absolute; width:100%; height:15%; overflow:visible;"> ... content with too-much horizontal content ... </div> </div>
所有的浏览器都很开心
我试图build立一个固定的定位边栏 ，同时使用垂直滚动的内容和嵌套的绝对定位的子 元素显示在边栏边界之外时，我遇到了这个问题。
我的方法是分别适用于：
- 一个
overflow: visible属性的侧边栏元素 - 一个
overflow-y: auto属性侧边栏内部包装
请检查下面的例子或在线codepen 。
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>
