Bootstrap / CSS - 修复浮动右图像的跨浏览器边距不一致答案

【问题标题】：Bootstrap / CSS - Fixing cross browser margin inconstencies for float-right imageBootstrap / CSS - 修复浮动右图像的跨浏览器边距不一致
【发布时间】：2017-04-07 22:15:59
【问题描述】：

我希望在 Chrome 中正确呈现的图像尽可能向右浮动，但在 FireFox 中它的顶部边距不正确，它穿过底部分隔线。

Example in Chrome
+--------------+
|Category     X|
+--------------+

Example in FF (too much margin-top)
+--------------+
| Category     |
+------------X-+

在图像上使用浮动时如何使浏览器之间的边距保持一致？

<li>
    <a>
              Category 2 (10%)
              <img class="pull-right" src="icon.svg">
    </a>
</li>

【问题讨论】：

你能给我们一个说明问题的演示吗？这些对我来说在 Firefox 和 chrome 中的行为相同 codepen.io/anon/pen/evaxKw 这是一个关于如何创建 minimal reproducible example 的链接
由于另一个问题，该元素看起来更像是漂浮在容器外。把你的代码放在笔里。

标签： html css twitter-bootstrap

【解决方案1】：

您是否尝试过重置边距和内边距？

    <style> 
* {
margin:0;
padding:0 
}
</style>

【讨论】：

【解决方案2】：

在css中应用以下规则解决了这个问题！

img{
      position: absolute;
      right: 0px;
      margin-top: 5px;  /* not mandatory but useful for vertical adjustment*/
}

Chrome 和 FF 现在的行为相同！

【讨论】：

【解决方案3】：

您可以仅使用为 firefox 编写不同的 css

@-moz-document url-prefix() {
    /* your css according to firefox */
}

对于 Internet Explorer

<!--[if IE]>
<style type='text/css'>
     /*your css according to IE */
<![endif]-->

【讨论】：