Why does -webkit-column-count:3 return disordered columns when -moz-column-count doesn't?

Question

My problem is arranging a group of images for the data I got from the database "they are images".

I just added the pagination to the could to return per page 9!

I use

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

The view in Firefox

The view in Chrome

This is the code for the 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;
}