javascript - 为不同的浏览器应用css

Question

我是网络开发新手。

这里我有一个 CSS，

height: calc(100vh - 46px);

这适用于所有浏览器，但是对于 mozila，

height: -moz-calc(100vh -46px );

这行得通。那么，如何为差异浏览器添加相同的内容？作为，我这样做是为了覆盖第二个。

我该如何解决？

Answer 1

据我所知，

calc 在 Mozilla 中得到了很好的支持。你可以查看Can I use有关每个浏览器支持哪些属性的更多信息。

除此之外，您应该执行以下操作，在普通规则之后添加前缀规则:

.my-style {
  height: calc(100vh - 46px);
  height: -moz-calc(100vh - 46px);
}

浏览器处理 CSS 的方式只会应用一个，所以这没有错。

如果你想跳过前缀规则的麻烦，你可以使用像Browserify这样的工具为您处理这一切。 Autoprefixer也是查看哪些规则需要添加前缀以及如何正确添加前缀的另一种选择。