将CSS应用于不同的浏览器

Question

我是Web开发的新手。

我在这里有一个CSS，

"Mike lewis"

这适用于所有浏览器， 但是对于height: calc(100vh - 46px); ，

mozila

这有效。那么，如何为差异浏览器添加相同的内容？正如我所做的那样，它覆盖了第二个。

我该如何解决？

Answer 1

据我了解，

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

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

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

浏览器处理CSS的方式，将仅应用一种，因此没有任何问题。

如果您想跳过前缀规则的麻烦，可以使用Browserify之类的工具来为您处理所有这一切。 Autoprefixer也是另一个选择，可以查看哪些规则需要添加前缀以及如何正确执行。