css - Chrome 对 margin-top 的解释与 Firefox 不同

Question

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

在下图中，您会看到“一些基本成员(member)”和“一些高级成员(member)”这两个词在 Chrome 中比 Firefox 高 1 或 2 个像素(相对于“B”图标)。

您还可以在图片中看到“检查元素”为“一些基本成员”链接提供的内容。可能有趣的是 margin-top 在 Chrome 的控制台中变淡了，而在 Firefox 的控制台中它根本没有出现!

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

但是，当宽度小于 340px 时，边距问题并非特定于示例，它在任何宽度上都是相同的。 Firefox 版本正确，Chrome 版本略有偏差。

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

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