Question

假设你有一些风格和标记：

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周围添加另一个元素来实现相同的结果。 Check it out.

Answer 1

经过一番认真的搜索后，我似乎找到了问题的答案：

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

在Gecko，Safari，Opera中，'可见' 当与...结合时也变成'自动' '隐藏'（换句话说：'可见' 结合时变成'自动' 其他任何不同的东西 '可见'）。 Gecko 1.8，Safari 3，Opera 9.5在他们中非常一致。

W3C spec也说：

'overflow-x'的计算值 '溢出-y'与他们的相同指定的值，除了一些与'可见'的组合不是可能：如果指定为 '可见'，另一个是'滚动'或 'auto'，然后'visible'设置为 '汽车'。计算的值 'overflow'等于计算出来的如果'overflow-y'，'overflow-x'的值是一样的;否则就是这对计算值'overflow-x'和 “溢出-Y”。

简短版本：

如果您对visible或overflow-x使用overflow-y而对另一个使用visible以外的其他内容，则visible值会被解释为{{ 1}}。

Answer 2

另一个廉价黑客，似乎可以解决这个问题：

style="padding-bottom: 250px; margin-bottom: -250px;"关于垂直溢出被截止的元素，250表示您下拉列表所需的像素数等。

Answer 3

在使用Cycle jQuery插件时，我最初发现了一种绕过它的CSS方法。 Cycle使用JavaScript将我的幻灯片设置为overflow: hidden，因此在将图片设置为width: 100%时，图片会垂直切割，因此我强制它们!important可见，并避免显示开箱即用的幻灯片动画我将overflow: hidden设置为幻灯片的容器div。希望它适合你。

更新 - 新解决方案：

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

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

新解决方案 - ＆gt; http://jsfiddle.net/xMddf/2/ （我找到了一种解决方法，使用包装器 div将overflow-x和overflow-y应用于不同的DOM元素，James Khoury就组合visible的问题提供了建议和hidden到一个DOM元素。）

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

Answer 4

我尝试使用垂直可滚动内容和嵌套绝对定位子项来构建固定定位侧边栏时遇到此问题显示在侧边栏边界。

我的方法包括单独申请：

侧栏元素的overflow: visible属性
{+ 1}}属性到侧边栏内部包装器

请查看以下示例或online codepen。

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;
}

Answer 5

我使用content+wrapper方法... 但是我做了与目前为止提到的不同的事情：我确保我的包装器边界确实 NOT 排队内容的边界朝着我想要显示的方向。

重要说明：根据content+wrapper, same-bounds，position等各种css组合，让overflow-*方法在一个或另一个浏览器上工作变得很容易......但是我永远不会使用这种方法让他们所有正确（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>

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

Answer 6

现在有一种解决此问题的新方法-如果您删除了位置：需要从容器中看到相对应的y相对位置的亲戚，则可以同时看到y和y的内容。 x隐藏，反之亦然（将overflow-x可见，并且将overflow-y隐藏，只需确保具有visible属性的容器没有相对放置）。

有关更多详细信息，请参见CSS Tricks上的这篇帖子-对我有用：https://css-tricks.com/popping-hidden-overflow/

Answer 7

如果你只希望第一行可见（但仍然需要溢出），一个小“hack”效果很好：

将间隙设置得非常高，以便您确定第二行被推出屏幕 - 例如：

gap: 10000rem;

它真的很笨拙，但非常适用于需要溢出菜单的桌面导航......

CSS overflow-x：visible;溢出-y：隐藏;导致滚动条问题

7 个答案: