CSS浏览器引擎前缀写法

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。

在CSS中，为了使网页或网站在不同浏览器上面表现一致，我们需要为不同的浏览器编写不同的CSS代码。这里就出现了浏览器引擎前缀，浏览器引擎前缀是某类浏览器特有的。

浏览器引擎前缀是一些放在CSS属性前的小字符串，用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。谷歌浏览器和 Safari浏览器使用的是 WebKit 渲染引擎，火狐浏览器使用的是 Gecko 引擎，Internet Explorer 使用的是 Trident 引擎，Opera 以前使用 Presto 引擎，后改为 WebKit 引擎。一种浏览器引擎里一般不实现其它引擎前缀标识的CSS属性，但由于以 WebKit 为引擎的移动浏览器相当流行，火狐等浏览器在其移动版里也实现了部分WebKit引擎前缀的CSS属性。

浏览器引擎前缀有哪些？

• -moz- 火狐等使用Mozilla浏览器引擎的浏览器

• -webkit- Safari, 谷歌浏览器等使用Webkit引擎的浏览器

• -o- Opera浏览器(早期)

• -ms- Internet Explorer (不一定) 

实例：设置边框图片，利用浏览器引擎前缀兼容主流浏览器。如下：

div {
  border-image:url(border.png) 30 30 round;
  -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
  -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
  -o-border-image:url(border.png) 30 30 round; /* Opera */
}

上面代码中，用到了 -moz-、-webkit-、-o- 前缀，分别代表不同的浏览器。

css广告位

为什么需要浏览器引擎前缀？

这些浏览器引擎前缀 (Vendor Prefix) 主要是各种浏览器用来试验或测试新出现的 CSS3 属性特征。可以总结为以下3点：

• 对新出现的标准的CSS3属性特征做实验性的实现

• 对CSS3中一些新属性做等效语义的个性实现

• 试验一些还未成为标准的的CSS属性，这些属性也许永远不会成为标准

这些前缀并非所有都是需要的，但通常你加上这些前缀不会有任何害处—。只要记住一条，把不带前缀的版本放到最后一行：

div {
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px; 
  -o-border-radius: 10px; 
  border-radius: 10px; 
}

有些新的 CSS3 属性已经试验了很久，一些浏览器已经对这些属性不再使用前缀。border-radius 属性就是一个非常典型的例子。最新版的浏览器都支持不带前缀的 border-radius 属性写法。如下：

div {
  border-radius: 10px; 
}

和上面效果一样。