Html firefox中的浮点序列中断

我的浮动有一个令人困惑的异常现象，这只发生在Firefox中，似乎只发生在序列的第三个浮动中

我有一行浮点数（目前为9个），它们会相应地从每行3个浮点数切换到每行2个浮点数。所有的浮动都有完全相同的类，因此没有任何明显的理由认为这个浮动应该执行。我试着移动浮动，看看它是否是一个特定的框-但它总是第三个，而且只有在firefox中

我的网站还没有完成，但我已经把它放在shereewalker.com上，以帮助查看问题以及下面的一些代码

当屏幕向下移动到两个图像行而不是3个图像行（700px断点）时，会出现问题

图像在改变时也会闪烁一点，但我可以接受

有什么想法吗？我只是一个初学者，这是非常奇怪和令人沮丧的

提前谢谢

基本html-重复多次

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

---

这都是关于你的形象维度的差异。如果所有图像的宽度和高度值都相同，就可以了

这都是关于你的形象维度的不同。如果所有图像的宽度和高度值都相同，就可以了

问题是什么？请在问题中提供一个可复制的示例。在我看来，没有问题你能看看Firefox中的shereewalker.com吗？问题是没有问题。。。。。据我所见，它工作得很好，代码很好，正如您的JSFIDLE。。。直到你在firefox中打开它。谢谢你的帮助有什么问题吗？请在问题中提供一个可复制的示例。在我看来，没有问题你能看看Firefox中的shereewalker.com吗？问题是没有问题。。。。。据我所见，它工作得很好，代码很好，正如您的JSFIDLE。。。直到你在firefox中打开它。感谢您的帮助我尝试了这一点，虽然序列流动正常，但图像需要按比例响应，因此我不能有固定的高度，它们会扭曲：（我明白了。这都是关于你的%width值的问题。如果你尝试编辑过的答案，就可以了！你能解释一下吗？44%的宽度是2 x 44=88，加上4%的三个边距是100%。它不需要完全100%？抱歉-再次感谢！由于使用流体布局，可能会导致一些计算问题。例如，它可以完美地用于100px容器宽度，但当容器将是-例如-112 px，%44计算将是2.5px或2.6px。好的-我刚刚阅读了有关浏览器舍入的内容，所以我理解得更好。我现在将尝试使用略小于100%的Firefox浏览器。谢谢！我尝试了这个，虽然序列正确，但图像需要按比例响应，因此我不能有一个固定的高度，它们会扭曲：（我明白了。这都是关于你的%width值的问题。如果你尝试编辑过的答案，就可以了！你能解释一下吗？44%的宽度是2 x 44=88，加上4%的三个边距是100%。它不需要完全100%？抱歉-再次感谢！由于使用流体布局，可能会导致一些计算问题。例如，它可以完美地用于100px容器宽度，但当容器将是-例如-112 px，%44计算将是2.5px或2.6px。好的-我刚刚阅读了有关浏览器舍入的内容，所以我理解得更好。我现在将尝试使用略低于100%的Firefox浏览器。谢谢！

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

  }
 }