CSS溢出-x：可见; 和溢出-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> 

当您查看此内容时。 <ul>在底部有一个滚动条，即使我已为溢出x / y指定了可见值和隐藏值。

（在Chrome 11和Opera（？）上观察到

我猜测一定有一些w3c规范或某些东西可以告诉我这种情况的发生，但是对我而言，我无法弄清楚为什么。

JSFiddle

更新：-我找到了一种方法，可以通过添加另一个包裹在ul周围的元素来达到相同的结果。 看看这个。

---

#1楼

我最初找到了一种使用Cycle jQuery插件绕过此问题的CSS方法。 Cycle使用JavaScript将幻灯片设置为overflow: hidden ，因此将图片设置为width: 100%的图片看起来是垂直切割的，因此我用!important强制使其可见，并避免在幻灯片中显示幻灯片动画。框，我将overflow: hidden设置为overflow: hidden到幻灯片的容器div中。 希望对你有效。

更新-新解决方案：

原始问题 -> http://jsfiddle.net/xMddf/1/ （即使我使用overflow-y: visible它也会变成“自动”，实际上是“滚动”。）

#content {
    height: 100px;
    width: 200px;
    overflow-x: hidden;
    overflow-y: visible;
}

新的解决方案 -> http://jsfiddle.net/xMddf/2/ （我找到了一种解决方法，如James Khoury所建议的，将wrapper div应用于对不同的DOM元素应用overflow-x和overflow-y ，有关合并visible和visible的问题hidden到单个DOM元素。）

#wrapper {
    height: 100px;
    overflow-y: visible;
}
#content {
    width: 200px;
    overflow-x: hidden;
}

---

#2楼

我使用了content+wrapper方法... 但是到目前为止，我所做的事情与之前提到的有所不同：我确保包装器的边界不与内容边界在希望可见的方向上对齐 。

重要说明：根据position ， overflow-*等的各种CSS组合，很容易获得content+wrapper, same-bounds方法在一种浏览器或另一种浏览器上工作，但是我永远无法使用这种方法来获得它们都正确（Edge，Chrome，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>

...所有浏览器都很高兴。

---

#3楼

另一个廉价的技巧，似乎可以解决问题：

style="padding-bottom: 250px; margin-bottom: -250px;" 在垂直溢出将被截断的元素上，其中250代表下拉菜单所需的像素数，依此类推。

---

#4楼

在尝试构建具有垂直可滚动内容和嵌套绝对位置子项的固定定位边栏以显示在边栏边界之外时，我遇到了这个问题。

我的方法包括分别适用：

• overflow: visible侧边栏元素的overflow: visible属性
• overflow-y: auto侧边栏内部包装的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> 

---

#5楼

现在，有一种解决此问题的新方法 -如果您删除了位置：需要从容器中看到需要相对于溢出Y的相对位置，您可以让相对可见的Y溢出和不可见的X处于隐藏状态，反之亦然（有溢出- x可见且溢出-y隐藏，只需确保具有visible属性的容器没有相对放置即可。

有关更多详细信息，请参阅CSS Tricks上的这篇文章-它对我有用 ： https ： //css-tricks.com/popping-hidden-overflow/

---

#6楼

经过一番认真的搜索之后，看来我已经找到了问题的答案：

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

在Gecko，Safari，Opera中，与“隐藏”组合使用时，“可见”也变为“自动”（换句话说：当与“可见”以外的其他任何元素组合时，“可见”变为“自动”）。 其中的Gecko 1.8，Safari 3，Opera 9.5非常一致。

W3C规范还说：

“ overflow-x”和“ overflow-y”的计算值与它们的指定值相同，不同之处在于某些与“ visible”的组合是不可能的：如果将一个指定为“ visible”，而另一个指定为“ scroll”或“自动”，然后将“可见”设置为“自动”。 如果“ overflow-y”相同，则“ overflow”的计算值等于“ overflow-x”的计算值。 否则为“ overflow-x”和“ overflow-y”的一对计算值。

简洁版本：

如果您对overflow-x或overflow-y使用visible ，而对overflow-x而不是visible ，则visible值将解释为auto 。