【发布时间】：2017-06-12 18:21:48
【问题描述】：
编辑 我注意到这个问题只发生在 Chrome 中
我将 Angular2 与 Webpack 一起使用，但我遇到了一个问题，即与我的生产版本相比，我的开发环境中的某些 SCSS 样式看起来有点不同。
在这些屏幕截图中，我将显示导航栏的右上角，其中有一个用户图标。正如您将看到的那样，该图标在我的开发服务器上的位置正确，但在生产版本中却错误地定位
DEV 上的用户图标，位置正确居中：
PROD 上的用户图标，位置错误：
在 Chromes 开发工具中，我们可以看到用户图标的蓝色突出显示，它们确实占用了不同数量的空间，尽管 CSS 完全相同：
【问题讨论】：
-
您能否检查“计算”选项卡中的“高度”属性。并检查它从哪里得到它的高度。
-
在 prod 上的高度是 32 px，在 dev 上是 45 px，在计算选项卡中，并且 height 属性本身是“禁用”的，所以它会以某种方式自动计算
-
@ErazerBrecht，我刚刚发现生产版本可以在 Firefox 上正确呈现它。它仅在 Chrome 中呈现错误，并且仅在生产版本中。
-
您是否在生产版本中进行了一些缩小，从而删除了 HTML 中的所有空格？
-
@ssc-hrep3 是的，我确实这样做了。这可能是罪魁祸首吗？但是，我解决了切换到基于 flexbox 的网格的问题。
标签： css angular sass webpack font-awesome