溢出-x被溢出y覆盖 [英] Overflow-x overwritten by overflow-y
问题描述
看起来 overflow-x 和 overflow-y 不会像我预期的那样表现。
如果我将 overflow-x 设置为visible，并将 overflow-y 设置为auto， overflow-x 不会作为可见的，而是作为隐藏的。
我缺少一些东西， p>
这里是一个示例。
HTML：
< / html
< body&
< div class ='container'>
< div class ='content'>
这是一个内容
< / div>
< div class ='content'>
这是一个内容
< / div>
< div class ='content'>
这是一个内容
< / div>
< div class ='content'>
这是一个内容
< / div>
< div class ='content'>
这是一个内容
< / div>
< div class ='content'>
这是一个内容
< / div>
< / div>
< / body>
< / html>
CSS：
.container {
background：rgba（0，0，0，0.1）;
width：200px;
height：100px;
overflow -y：auto;
overflow-x：visible;
}
.content {
border：1px solid rgba（255，255，255，0.6）;
color：rgba（255，255，255，0.6）;
position：relative;
margin-left：-14px;
padding-left：14px;
}
OP：
溢出CSS属性指定是否剪辑内容，呈现滚动条或显示块级元素的溢出内容。
使用overflow属性的值不同于visible，它的默认值会创建一个新的块格式化上下文。这在技术上是必要的，因为如果浮动将与滚动元素相交，则它将迫使重新包裹可滚动元素在侵入浮动周围的内容。重新包装将在每个滚动步骤之后发生，并且将导致太慢的滚动体验。注意，通过编程设置scrollTop到相关的HTML元素，即使溢出有隐藏的值，一个元素可能需要滚动。
溢出值：
visible：
默认值。
内容被剪辑，没有滚动条 scroll：
内容被剪辑，桌面浏览器使用滚动条，无论是否剪切任何内容。这避免了滚动条在动态环境中出现和消失的任何问题。打印机可能打印溢出的内容。
auto：
取决于用户代理。桌面浏览器（如Firefox）会在内容溢出时提供滚动条。
添加更多详情：
来自： http://www.brunildo.org/test/Overflowxy2.html
在Gecko，Safari，Opera中，visible与hidden词：'可见'变成'自动'，当与任何不同于'可见'的东西组合时）。 Gecko 1.8，Safari 3，Opera 9.5在它们之间是非常一致的。
还有 W3C spec 说：
'overflow-x'和'overflow-y'的计算值与它们指定的值相同，除了一些带有visible的组合是不可能的：如果一个被指定为visible，另一个是scroll '或'auto'，则'visible'设置为'auto'。如果overflow-y相同，则overflow的计算值等于overflow-x的计算值;否则是overflow-x和overflow-y的计算值对。
It seems that overflow-x and overflow-y don't behave as I expect it to behave.
If I set overflow-x to visible, and overflow-y to auto, overflow-x won't behave as visible, but as hidden.
Am I missing something, or is this normal?
Here is an example.
HTML:
</html
<body>
<div class='container'>
<div class='content'>
This is a content
</div>
<div class='content'>
This is a content
</div>
<div class='content'>
This is a content
</div>
<div class='content'>
This is a content
</div>
<div class='content'>
This is a content
</div>
<div class='content'>
This is a content
</div>
</div>
</body>
</html>
CSS:
.container {
background: rgba(0, 0, 0, 0.1);
width: 200px;
height: 100px;
overflow-y: auto;
overflow-x: visible;
}
.content {
border: 1px solid rgba(255, 255, 255, 0.6);
color: rgba(255, 255, 255, 0.6);
position: relative;
margin-left: -14px;
padding-left: 14px;
}
EDITED: After more details by OP:
The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.
Using the overflow property with a value different than visible, its default, will create a new block formatting context. This is technically necessary as if a float would intersect with the scrolling element it would force to rewrap the content of the scrollable element around intruding floats. The rewrap would happen after each scroll step and would be lead to a far too slow scrolling experience. Note that, by programmatically setting scrollTop to the relevant HTML element, even when overflow has the hidden value an element may need to scroll.
Values of Overflow:
visible: Default value. Content is not clipped, it may be rendered outside the content box.
hidden: The content is clipped and no scrollbars are provided.
scroll: The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.
auto: Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows.
Added More Details:
from: http://www.brunildo.org/test/Overflowxy2.html
In Gecko, Safari, Opera, ‘visible’ becomes ‘auto’ also when combined with ‘hidden’ (in other words: ‘visible’ becomes ‘auto’ when combined with anything else different from ‘visible’). Gecko 1.8, Safari 3, Opera 9.5 are pretty consistent among them.
also the W3C spec says:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.
这篇关于溢出-x被溢出y覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
