溢出-y覆盖溢出-y

看来overflow-x和overflow-y不像我预期的那样行为。如果我将overflow-x设置为可见，并且overflow-y设置为自动，overflow-x将不会显示为可见，但会隐藏。溢出-y覆盖溢出-y

我错过了什么，或者这是正常的吗？

Here就是一个例子。

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

来源

2012-07-27 etnbrd

使用'溢出-X：滚动;'，而不是'溢出-X：可见;'在我的回答如下。 – 2012-07-27 09:37:46

不，我不想溢出 - X是滚动的，我希望它是可见的。我想'content'的一部分被淘汰'container'的。 – etnbrd 2012-07-27 09:45:47

编辑：后由OP更多的细节：

溢出CSS属性指定是否剪辑内容，使滚动条或显示溢出块级元素的内容。

使用溢出属性的值与可见值不同，其默认值将创建一个新的块格式上下文。这在技术上是必要的，就好像浮动与滚动元素相交，它将强制重新缠绕围绕入口浮动的可滚动元素的内容。重新包装会在每个滚动步骤后发生，并且会导致滚动体验过慢。请注意，通过以编程方式将scrollTop设置为相关的HTML元素，即使溢出具有隐藏值，元素可能需要滚动。溢出的

值：

可见： 默认值。内容不剪裁，可能会在内容框外渲染。

隐藏：内容被剪裁并且不提供滚动条。

滚动： 剪辑的内容和桌面浏览器使用滚动条，无论是否剪辑任何内容。这可以避免滚动条在动态环境中出现和消失的问题。打印机可能会打印溢出的内容。

汽车： 取决于用户代理。如果内容溢出，Firefox等桌面浏览器会提供滚动条。

See Reference

增加了更多的细节：

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

在壁虎，Safari浏览器，歌剧， '可见' 也变时 '隐藏'（合并 '自动'换句话说：'可见'与'可见'不同时与'其他'结合成'自动'）。其中Gecko 1.8，Safari 3，Opera 9.5相当一致。

也是W3C spec说：

“溢出-x”和“溢出-Y”的计算值是与它们的指定的值，不同的是一些组合与“可见的”是不可能的：如果一个被指定为'可见'，另一个被'滚动'或'自动'，则'可见'被设置为'自动'。如果'overflow-y'是相同的，'overflow'的计算值等于'overflow-x'的计算值;否则它是'overflow-x'和'overflow-y'的计算值对。

来源

2012-07-27 09:33:55

也许我没有足够解释我想要的东西。我想列出一个列表（可能很长，因此我需要滚动），并且此列表中的一个元素可以是活动的，并且在“容器”块的外部左边缘有一个小箭头，因此我需要'overflow-x'可见。 – etnbrd 2012-07-27 09:38:59

@EtienneBrodu：在更多细节后更新了我的答案。 – 2012-07-27 09:49:10

我知道这个参考，而且我确切地知道每个选项的作用。我不明白的是为什么'visible'和'auto'不能合并。我使用最新的Firefox和Chrome，并没有可以显示在Y方向上的滚动条可见在x方向。 – etnbrd 2012-07-27 09:53:28

实际上overflow-x将在您的示例中充当auto。

有一些overflow-x和overflow-y的组合不能组合，因为它们根本不起作用。您不能将容器内的内容向一个方向滚动，并且不能在容器的另一个方向上看到该内容。

来源

2012-07-27 09:38:38 Guffa

可不可以给我这个有一定的参考？ – etnbrd 2012-07-27 09:46:33

溢出-y覆盖溢出-y

回答

相关问题