：在Webkit上的css多列布局中懸停狀態元素

Question

我正面臨着一個多列布局中懸停圖像的錯誤： http ： //codepen.io/kompuser/pen/CIwFo

在這個codepen中，我為一個figure元素中包含的每個img設置了一個簡單的：hover屬性。

布局是一個多列的div設置為水平滾動。

基本上，當沒有滾動時，懸停的img表現正確。

容器div（甚至略微）滾動時會發生錯誤。 然后，任何img或figure元素懸停都表現不正確，我們可以看到創建了一個偏移/毛刺。

這在Chrome 38（Windows 7，OS X 10.9），Windows上的Safari 5.1.7，OS X上的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;
}

Answer 1

這肯定是一個錯誤，它似乎發生在有一個帶有列和一些滾動的塊時。 解決方法是將這些屬性拆分為不同的塊，因此包裝器將具有滾動，內部塊將具有列： http ： //codepen.io/kizu/pen/saItm

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

（當然，從列中刪除那些樣式的列）然后

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

應該足以讓蟲子不再出現。