html - -moz-column-count では返されないのに、-webkit-column-count:3 では乱れた列が返されるのはなぜですか?

Question

私の問題は、データベースから取得したデータの「画像」のグループを配置することです。

9ページごとに戻るようにページネーションを追加しました！

私が使う

-webkit-column-count:3; 
-moz-column-count:3;
-column-count:3;

Firefox でのビュー

Chrome での表示

これは、li & ul のコードです。

.news_box ul {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}
.cat_box ul {
    display: inline-block;
    width: 100%;
}
.cat_box ul li.first_news {
    width: 100%;
    float: none;
    height: auto;
    padding: 20px;
    margin: -20px;
    position: relative;
    }
.cat_box ul li.first_news {
    width: 100%;
    float: none;
    height: auto;
    padding: 25px 20px;
    margin: -20px;
    position: relative;
}
.cat_box ul li {
    overflow: hidden;
    padding: 15px;
    transition: all 0.4s ease 0s;
    width: 50%;
    float: left;
    height: auto;
    margin: -15px -15px 0px;
}
.cat_box ul li {
    overflow: hidden;
    padding: 15px;
    transition: all 0.4s ease 0s;
    width: 50%;
    float: left;
    height: auto;
    margin: -15px -15px 0px;
}