Css 在Chrome上使用“列计数”的问题
我过去两个小时都在考虑这个问题,我不知道该怎么解决这个问题 我正在使用column count和column widthcss属性在HTML5中创建一个漂亮而稳定的马赛克Css 在Chrome上使用“列计数”的问题,css,html,google-chrome,Css,Html,Google Chrome,我过去两个小时都在考虑这个问题,我不知道该怎么解决这个问题 我正在使用column count和column widthcss属性在HTML5中创建一个漂亮而稳定的马赛克 这是我的代码,我认为可以帮助你做你想做的事情。我知道有几个“js”库可以帮助我,但这看起来像是chrome的错,我真的想知道为什么会发生这种情况@MouhamadKawasIn chrome 41。在我悬停在一些div上之前,它看起来不错。您正在尝试在Chrome上的hover上修复此问题,对吗?@fiskolin问题是.ar
这是我的代码,我认为可以帮助你做你想做的事情。我知道有几个“js”库可以帮助我,但这看起来像是chrome的错,我真的想知道为什么会发生这种情况@MouhamadKawasIn chrome 41。在我悬停在一些div上之前,它看起来不错。您正在尝试在Chrome上的hover上修复此问题,对吗?@fiskolin问题是.article.thumb:hover img.scale{transform:scale1.2,1.2}这会在Chrome上的hover中产生一个列错误,只有左侧正确工作。我不确定是否可以在chrome上解决这个冲突。@Nima我意识到,如果我添加position:relative.article,图像显示正确,但悬停错误位于左侧,甚至在.thumb:hover.hoverarticle上。
<aside class="lastarticles">
<div class="article">
<div class="thumb"><img class="transition" src="media/thumb/thumb1.jpg">
<div class="hoverarticle transition">
<a href="single.html"><div class="readmore">
<div class="midler"> <i class="fa fa-plus"></i> </div>
</div></a>
</div>
</div>
<div class="caption">
<p>“Como é que vocês se conheceram?”
"Mas nós não nos conhecemos."</p>
</div>
</div>
</aside>
.lastarticles {
-moz-column-count: 4;
-moz-column-width: 25%;
-webkit-column-count: 4;
-webkit-column-width: 285px;
column-count: 4;
column-width: 25%;
}
.article {
margin-bottom: 20px;
padding: 0px;
overflow: hidden;
}
.article .thumb {
height: 100%;
display: block;
position: relative;
width: 100%;
overflow: hidden;
}
.article .thumb img {
display: block;
}
.article .thumb:hover .hoverarticle {
background: rgba(51, 51, 51,.7);
opacity: 1;
}
.article .thumb:hover img {
transform:scale(1.2,1.2)
}
.article .thumb:hover i {
-webkit-animation: rotateInUpLeft .9s;
-moz-animation: rotateInUpLeft .9s;
-ms-animation: rotateInUpLeft .9s;
-o-animation: rotateInUpLeft .9s;
animation: rotateInUpLeft .9s;
}
.article .hoverarticle {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
}
.article .hoverarticle .readmore {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.article .hoverarticle i {
color: #fff;
font-size: 20pt
}
.article .caption {
margin: 0px;
display: table-cell;
padding: 5px 10px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
}
.article .caption p {
font-family: "open_sanslight";
font-size: 11pt;
margin: 0px;
color: #333;
}