我只是在玩一个网站,我注意到虽然我的网站在 Chrome、Safari 和其他网站上看起来不错。它在 Firefox(23) 上的流动不一样。Firefox 如何处理诸如填充和高度之类的事情?
铬合金:
火狐
这是我的CSS:
/*----------all small sizes------------*/
a.small-block{
font-size: 1em;
height: 134px;
width: 40%;
padding: 2.5%;
margin: 2.5%;
}
a.about{
background-color: #CBA70C;
}
a.music{
background-color: #F35C4D;
}
a.pictures {
background-color: #6398FF;
}
a.feedback {
background-color: #B82808;
}
/*----------end of small boxes---------*/
/*------------medium boxes--------------*/
a.med-block{
font-size: 1.5em;
font-weight: 300;
width: 90%;
padding: 2.5%;
margin: 2.5%;
}
a.albums {
background-color: #B34945;
}
a.songs {
background-color: #80ADEA;
}
/*------------end of medium boxes---------*/
/*--------------big box--------------*/
a.big-block{
font-size: 1.875em;
font-weight: 300;
height: 187px;
width: 100%;
padding: 160px 0 5px 5px;
margin-top:2.5%;
}
a.history{
background-color: #A3BF3B;
}
/*-------------end of big box-----------------*/
a.med-block, a.small-block, a.big-block {
-moz-box-sizing: border-box;
color: #FFFFFF;
display: block;
float:left;
overflow:hidden;
text-decoration: none;
transition: background-color 250ms ease-out 0s;
}
在我看来,Firefox 正在以不同的方式读取填充。如果我将其更改为在 Firefox 上看起来不错,则其他浏览器看起来都不同