：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

回答

相关问题