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

【问题标题】：Chrome interprets margin-top different from FirefoxChrome 对 margin-top 的解释与 Firefox 不同
【发布时间】：2015-03-06 11:56:04
【问题描述】：

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

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

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

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

但是，边距问题并不特定于宽度小于 340 像素的示例，在任何宽度上都是相同的。火狐版本正确，Chrome版本差一点。

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

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

【问题讨论】：

查看源代码。如果某个浏览器的检查器中没有某些内容，则并不意味着它根本不存在。您可以编写 css 以通过多种不同方式仅影响一个浏览器。点击 minestyle.css 链接后显示什么？
创建JSFiddle?
@JamieBarker 给你：jsfiddle.net/24L7z2mu/3
@Kinga CSS 文件只为元素定义了font-size 和margin-top，没有任何特定于浏览器的内容...您可以在小提琴中看到完整的CSS。
@jovan 但我在你的 jsfiddle 中看到了它：@ media (max-width: 340px) { .menu-list > li > a { .... .league_name,.league_score{ font-size ：17像素；边距顶部：16px；那么你认为 Chrome 不会尊重它吗？

标签： css twitter-bootstrap google-chrome

【解决方案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

【讨论】：

谢谢，这当然是一个更好的解决方案。但是，出于好奇，知道是什么导致了 margin-top 的问题吗？可能与行高有关吗？
也许，但根据我的经验，浏览器之间几乎总是存在一些细微的差异。哎呀，IE6 加倍 margin-left 在左侧浮动的东西上。仅使用边距作为间距。可以使用更好的方法来实现所有事物的对齐，并且您最终会使用更少的 CSS 代码！