Firefox 中的浮动序列中断

Question

我的浮点数有一个令人困惑的异常，它只发生在 Firefox 中，而且似乎只发生在序列的第三个浮点数中。

我有一排浮点数（目前是 9 个），它们响应式地从每行 3 个变为每行 2 个。所有花车都具有完全相同的 class，因此没有任何明显的理由让这个花车出现。我试过移动花车以查看它是否是一个特定的盒子 - 但它始终是第三个并且仅在 firefox 中。

我的网站尚未完成，但我已将其放在 shereewalker.com 上以帮助查看问题以及下面的一些代码。

当屏幕向下移动到两行图像而不是三行（700 像素断点）时会出现此问题。

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

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

提前致谢

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

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

这都是关于你的图像尺寸的差异。如果您所有的图像宽度和高度值都相同，那就没问题了！

Firefox 中的浮动序列中断

Float sequence breaks in firefox

html

css

firefox

css-float

media-queries