Question

我对我的花车有一个令人困惑的异常，只发生在Firefox中，看起来只有序列的第3个浮点数。

我有一行浮动（当前为9），响应性地从每行3个切换到每行2个。所有浮动都具有完全相同的类别，因此没有任何明显的原因这个浮出水面。我已经尝试将浮动轮移动以查看它是否是一个特定的盒子 - 但它始终是第3个并且仅在firefox中。

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

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

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

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

提前致谢

基本的HTML - 重复多次

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

  }
 }

这是css

awk -F'>>' '$3~/yourPattern/' file

Answer 1

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

firefox中的浮点序列中断

1 个答案: