Chrome解释了与Firefox不同的优势

Question

我确实意识到这个问题存在于SO的多个实例中，但答案归结为“重置CSS＆＃39;而且我已经这样做了，所以我对此感到困惑。

在下图中，您将看到单词＆＃34;某些基本成员＆＃34;和＃34;一些高级会员＆＃34;与Firefox相比，Chrome中的像素高出1或2像素（相对于＆＃34; B＆＃34;图标）。

你还可以在图像中看到＆＃34;检查元素＆＃34;为一些基本成员提供了＃34;链接。可能有趣的是，margin-top在Chrome控制台中已经消失了，在Firefox中它根本不会出现！

这是一个使用Bootstrap的响应式设计。此特定示例位于@media (max-width: 340px)下。当我取消选中Chrome中的margin-top时，该链接会进一步向上移动，因为它会继承@media (max-width: 420px)的样式。

但是，当宽度小于340px时，边距问题并不特定于示例，在任何宽度上它都是相同的。 Firefox版本是正确的，Chrome版本稍微关闭了。

知道原因可能是什么以及如何解决它？

小提琴：http://jsfiddle.net/24L7z2mu/3/

Answer 1

不要使用保证金来协调一致。

如果您希望文字垂直居中于图片，可以使用display:inline-block;vertical-align:middle;

来实现此目的

.league_type_icon, .item_type_icon {
    width: 40px;
    margin: 10px;
    display:inline-block;
    vertical-align:middle;
}
.league_name {
    font-size: 30px;
    color: #211b18;
    display:inline-block;
    vertical-align:middle;
}

使用此方法，您可以完全摆脱@media查询

中的边距

EXAMPLE