Question

我有一个CSS代码：

.tudo ul {
    width: 100%;
    margin: 0px;
    display: -webkit-inline-box;
}

但是Mozilla Firefox没有阅读：

display: -webkit-inline-box;

我可以为每个浏览器设置不同的显示吗？如果是这样，我该怎么做？

Answer 1

所有浏览器都使用一些前缀用于＆＃34; beta＆＃34; （通常此前缀会随着浏览器的最新版本而消失）例如-webkit的CSS样式适用于Chrome，Opera和Safari，但-moz适用于Mozzilla Firefox，并且一个供应商前缀不会运行在其他浏览器上，您可以看到最常用的前缀here。

当您编写一些CSS时，我建议您不要使用任何供应商前缀，但在使用Pleeease.io等在线服务完成您的progect时自动为您的文件添加前缀。您还可以使用Prepos之类的预处理器在保存时自动为CSS添加前缀。

这是使用Pleeease.io的示例：

INPUT

.a {
 display: flex;
 background: linear-gradient(red, green);
}

输出

.a {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 background: -webkit-linear-gradient(red, green);
 background: linear-gradient(red, green);
}

不同的浏览器（显示：-webkit-inline-box;）

1 个答案: