Float sequence breaks in firefox

Question

I have a confusing anomaly with my floats that only happens in Firefox and seemingly only with the 3rd float of the sequence.

I have a row of floats (currently 9), that responsively switch from 3 per line to 2 per line. All the floats have exactly the same class so there isn't any obvious reason this one should act out. I have tried moving the floats round to see if it's one particular box - but it's always the 3rd and only in firefox.

My site isn't finished but I have put it up on shereewalker.com to help see the issue as well as some code below.

The issue happens when the screen is moved down to a two image row rather than 3 (700px break point).

The images also flash a little when changing but I can live with that.

Any ideas? I'm just a beginner at this stuff and it's very strange and frustrating.

Thanks in advance

Basic html - repeated multiple times

    <div class="flex_one">
         <a><img class="icon-image" src="images/new/thumb_adtc.jpg"/></a>
    </div>
    <div class="flex_one">
         <a><img class="icon-image" src="images/new/thumb_adtc.jpg"/></a>
    </div>

Here is the css

.icon-image {
    width:100%;
    height:auto;
    opacity:1;
    -webkit-transition: all 900ms ease;
    -moz-transition: all 900ms ease;
    -ms-transition: all 900ms ease;
    -o-transition: all 900ms ease;
    transition: all 900ms ease;
}


@media screen and (min-width:321px) and (max-width:700px) {

.flex_one {
    width:44%;
    height:auto;    
    float:left;
    border: solid 2px rgb(0,81,88);
    position:relative;
    background-color:#000;
    margin-left:4%;
    margin-top:4%;
    -webkit-transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition: 1s ease;
    -ms-transition: 1s ease;
    -moz-box-sizing: border-box;
    box-sizing: border-box;


}

}



/*/////////////3 COLUMN LAYOUT///////////// */


@media screen and (min-width:701px) {


.flex_one {
    width:28%;
    float:left;
    position:relative;
    background-color:#000;
    border: solid 2px rgb(0,81,88);
    overflow:hidden;
    margin-left:4%;
    margin-top:4%;
    -webkit-transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition: 1s ease;
    -ms-transition: 1s ease;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

  }
 }

Answer 1

It's all about difference of your image dimension. If all your images width and height values will be same, it will be ok!