溢出-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

回答

相關問題