问题使用"列数"在Chrome上

时间:2015-01-10 17:27:36

标签: html css html5 google-chrome

我在过去2个小时内就遇到了这个问题,我不知道如何解决这个问题。

我正在使用column-countcolumn-width css属性在HTML5中创建一个漂亮而稳定的马赛克。

这是我的代码< - 请注意,我需要将绝对值放在-webkit-column-width属性中,%无法正常工作。

<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;
}

这是Firefox上的结果(预期的结果) enter image description here

以下是Chrome上的结果(很奇怪) enter image description here

JSFIDLE

0 个答案:

没有答案