css - -ms-appearance、-0-appearance 和在编辑器中显示为错误的外观。

Question

我的 CSS 中有以下代码:

header input{
width:100%;
height:50px;
float:left;
color:fff;
background: rgba(255,255,255,0.2);
border-top-left-radius: 5px;
border-top-right-radius:25px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 25px;
border: 0px;
box-shadow: none;
outline: none;

-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance:none;
-o-appearance: none;
appearance: none;

}

我使用 Webstorm 作为我的编辑器，这段代码显示为错误:

-ms-appearance:none;
-o-appearance: none;
appearance: none;

是我做错了什么，还是编辑在胡闹？

Answer 1

五个主要浏览器(Edge、Chrome、Firefox、Safari 和 Opera)混合使用 -moz-appearance 和 -webkit-appearance。它在 IE 中不受支持。所以你的编辑在这里告诉你的并不是他们一定是错的，只是没有意义。

出于某种原因，Edge 使用 -webkit-appearance 而不是 -ms-appearance

我会将您的代码更改为:

-webkit-appearance: none;
-moz-appearance: none;
 appearance: none;

因此它对所有主要浏览器都是正确的，并且是面向 future 的，因为很快 appearance 将失去它的前缀。