当存在overflow-x:hidden时，overflow-y:visible无法正常工作。

Question

当存在overflow-x:hidden时，overflow-y:visible无法正常工作。

55

在Chrome或Firefox中无法正常工作。是否有任何解决方法？

   <!DOCTYPE html>
   <html>
   <head></head>
   <body>
    <h3>overflow-y:visible</h3>

    with overflow-x:hidden
    <div style="overflow-x:hidden;overflow-y:visible;width:100px;height:100px;   position:relative;background:#666;">
        <div style="top:20px;left:20px;    width:420px;height:420px;position:absolute;background:#420;">
        </div>
    </div>

    without overflow-x:hidden
    <div style="overflow-y:visible;width:100px;height:100px;position:relative;background:#666;">
        <div style="top:20px;left:20px; width:420px;height:420px;position:absolute;background:#420;">
        </div>
    </div>

   </body>
   </html>

http://jsfiddle.net/sMNyK/

实际情况涉及到必须具有overflow-x:hidden的组件，但这会触发弹出菜单，需要使其在y方向上能够脱离元素。我应该将这些菜单定位在父组件之外，还是有更好的解决方法？

- Seppo420

6

我发现在FF（版本21）和Chrome（版本27）中，似乎仍存在这个问题。我的问题是：overflow-x: visible; overflow-y: hidden;，但两个轴上都出现了裁剪。 - Sprintstar

1

我今天也遇到了这个问题，在FF和Chrome中都是如此。它肯定看起来像是一个错误，而不是预期的行为。 - smohadjer

1

你遇到问题是因为使用了position:relative;。 - Abhijit Jagtap

2

还没有解决方案吗？已经过去了5年4个月了。 - Manoj Shrestha

2

哈哈，现在都快2020年了，这个问题仍然存在。我找到了一种解决方法，通过不在元素上设置静态高度来实现，但这并不是一个很好的解决方案。 - garrettmills

2个回答

4

我认为您可以通过额外包装一个 div 来实现隐藏，但不需要设置 position: relative（请参考 fiddle）：

<div style="overflow-y:visible;width:100px;height:100px;position:relative;background:#666;">
    <div style="overflow-x:hidden">
    ooooooooooooooooooooooooooooooooooooooooooooooo  
        <div style="top:20px;left:20px; width:420px;height:420px;position:absolute;background:#420;">
        </div>
    </div>
</div>

- ScottS

1

这不起作用，因为需要overflow-y:visible的组件位于需要overflow-x:hidden的组件内部。 - Seppo420

@user1185421--首先，你在问题中说把它们“放在父组件之外”可能是唯一的选项。我的解决方案只要那些需要overflow-x:hidden的组件没有设置position就可以工作。这样会使得absolute元素仅与设为overflow-y: visible的div有关。 - ScottS

2

@user1185421--这里有一个 jsfiddle 链接（http://jsfiddle.net/sMNyK/4/），其中包含一个宽的 div，里面有一个弹出的 div。 - ScottS

你救了我的一天，Scotts！非常感谢！ - Peter Babukh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sprintstar · Accepted Answer

这可能与此处解决的问题有关：CSS overflow-x: visible;和overflow-y: hidden;导致滚动条问题简而言之，当对于overflow-x或overflow-y中的任意一个使用visible，并且对于另一个使用不同的值时，visible值将被解释为auto。