设置溢出-x:隐藏添加垂直滚动条
当我在水平和垂直溢出的元素上指定overflow-x: hidden时，元素除了隐藏水平溢出的内容外，还会获得一个垂直滚动条。我尝试过添加overflow-y: visible，甚至只添加overflow: visible，但没有效果。
我是否误解了这些属性的作用？我认为overflow-x根本不应该影响垂直溢出。
我试过的每一个浏览器都会出现这种情况。
这里有一个片段，它演示了这种效果。我之所以使用<pre>标记，是因为它们是创建溢出内容的简单方法，但它似乎发生在任何标记中。
pre {
height: 40px;
width: 150px;
margin-bottom: 50px; /* We need this so they don't overlap. */
}
#x-hidden {
overflow-x: hidden;
}
#y-visible {
overflow-x: hidden;
overflow-y: visible;
}
#visible {
overflow: visible;
overflow-x: hidden;
}<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
<pre id="x-hidden">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
<pre id="y-visible">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
<pre id="visible">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
W3C规范说：
计算值“overflow”和“overflow”与它们的指定值相同，只是一些“可见”的组合是不可能的:如果一个指定为“可见”，而另一个指定为“滚动”或“自动”，则“可见”设置为“auto”。
但这并没有提到overflow-x或overflow-y设置为hidden时的情况，这意味着这种组合确实是可能的。
回答 10
Stack Overflow用户
发布于 2014-04-30 06:32:38
查看一个相关问题的答案：https://stackoverflow.com/a/6433475/3583023
它解释了为什么
el {
overflow-x: hidden;
overflow-y: visible;
}呈现为
el {
overflow-x: hidden;
overflow-y: auto;
}，它通常呈现相同的
el {
overflow-x: hidden;
overflow-y: scroll;
}因为在大多数浏览器中，overflow-y的overflow-y值是scroll。
因此，为了达到这个效果，我们不能使用overflow-x/overflow-y属性。我尝试过clip属性作为一种可能的替代方案，但到目前为止还没有结果：http://jsfiddle.net/qvEq5/
Stack Overflow用户
发布于 2014-02-06 18:36:01
试着设定你的身高。要么让它像100%，要么自动检查这个
小提琴
height: auto;Stack Overflow用户
发布于 2015-08-18 12:20:50
就在一小时前，我遇到了类似的问题，除了我把overflow的值指定为auto时发生的问题。我没有使用overflow-x或overflow-y，我只是需要它完全包含两个两端浮动的列表。
对我有用的是，我将overflow的值更改为hidden。尝试一下。我已经将max-width设置为100%，而不是指定高度，我只是使用了overflow: hidden。
希望这能有所帮助。
https://stackoverflow.com/questions/6179831
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号