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-x”和“overflow-y”的计算值与其指定值相同,但某些与“visible”组合的情况是不可能的:如果一个被指定为“visible”,而另一个被指定为“scroll”或“auto”,则“visible”将被设置为“auto”。
但是,这并没有提到当overflow-x
或overflow-y
设置为hidden
时的情况,这意味着我认为这种组合确实是可能的。
overflow-x-hidden
并显示Y轴,但它却添加了一个滚动条。最终我加上了overflow-x-CLIP
。现在问题已经解决了。 - maiakd