: 在 Webkit 上的 css 多列布局中悬停状态元素答案

【问题标题】：:hover state element within css multi-column layout on Webkit: 在 Webkit 上的 css 多列布局中悬停状态元素
【发布时间】：2014-10-06 12:05:07
【问题描述】：

我遇到了一个图像悬停在多列布局中的错误：http://codepen.io/kompuser/pen/CIwFo

在这个 codepen 上，我为图形元素中包含的每个 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;
}

【问题讨论】：

我在 Firefox 33.0 ubuntu 中没有看到偏移故障
你是对的。因为它只是 webkit 错误，我忘了把它添加到我的帖子中。
哪个版本/平台？在适用于 Windows 的 Safari 5.1.7 中看起来不错...
@Le-roy 它发生在 Chrome 38（Windows 7、Os X 10.9）、Safari 7.0.6（在 OS X 10.9 上）
在 Chrome 38.0.2125.101 m Windows 7 上看起来不错

标签： html css webkit multiple-columns

【解决方案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>

应该足以让 bug 不再出现。

【讨论】：