：Webkit的

我面對錯誤與圖像的多欄佈局徘徊CSS多欄佈局內懸停狀態元素：http://codepen.io/kompuser/pen/CIwFo ：Webkit的

在此codepen，我給自己定一個簡單的：懸停屬性每個img都包含在一個figure元素中。

該佈局是一個多欄集div水平滾動。

基本上，當沒有滾動時，img的行爲是正確的。

當容器div（甚至是輕微地）滾動時，會發生錯誤。然後，任何img或圖形元素的盤旋行爲不正確，我們可以看到創建了偏移/毛刺。

這證實了在Chrome 38在OS X上（的Windows 7，Mac OS X 10.9），Safari瀏覽器5.1.7的Windows，Safari瀏覽器7.0.6

.entry-content{ 
    display:block; 
    -moz-column-width:  240px; 
    -webkit-column-width: 240px; 
    -ms-column-width:  240px; 
    column-width:   240px; 

    -moz-column-gap:  1em; 
    column-gap:    1em; 
    -ms-column-gap:   1em; 
    -webkit-column-gap:  1em; 

    overflow-y:    hidden; 
    overflow-x:    auto; 
    height:     480px; 
    font-size:    16px; 
    line-height:   19px; 
    margin: 1em; 
    padding: 1em; 
    -webkit-overflow-scrolling: touch; 
    clear:both; 
    position:relative; 
} 


.entry-content figure { 
    max-width:100%; 
} 

.entry-content figure:hover img { 
    opacity:.5; 
}

來源

2014-10-06 B.R

我沒有看到在Firefox 33.0的偏移故障ubuntu – 2014-10-22 09:35:55

你是對的。因爲它只是webkit的bug，我忘了把它添加到我的文章。 – 2014-10-22 09:42:06

哪個版本/平臺？在Safari 5.1.7 for Windows中看起來不錯... – 2014-10-22 09:59:33

這肯定是一個錯誤，這似乎發生當有一個塊的列和一些滾動。的解決方法是將分割的那些性質不同的塊，所以所述包裝將具有滾動和內部塊將具有列：http://codepen.io/kizu/pen/saItm

.entry-wrapper { 
    overflow-y: hidden; 
    overflow-x: auto; 
}

（當然與從與列中的塊除去這些樣式）和那麼

<div class="entry-wrapper"> 
    <div class="entry-content"> 
    … 
    </div> 
</div>

應該足以使錯誤不再出現。

來源

2014-10-25 21:31:49 kizu

回答

相關問題