Question

我已经开始阅读有关jquery UI插件（themeroller）的文档。由于这些插件进一步抽象网页设计，我想确保我基本了解jquery在幕后做了什么。

我现在正在使用Dialoge框示例，我发现它使用了以下css代码：

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { 
   -moz-border-radius-topleft: 4px; 
   -webkit-border-top-left-radius: 4px; 
   -khtml-border-top-left-radius: 4px; 
   border-top-left-radius: 4px; 
}

我不认识-moz，-webkit等css样式。谁能向我解释所有这些风格是什么？我试着谷歌他们，然后空白。

Answer 1

这些是为了在过去（不久前）浏览器无法理解border-radius css属性时向后兼容旧浏览器。这些特定术语使相应的浏览器能够理解并应用该样式。基本上：这适用于旧版浏览器

Answer 2

它们是特定于供应商的css设置。通常，当css规则尚未被所有浏览器完全采用时，制造商会通过在样式前加上名称前缀来添加对样式的支持。

-ms-    Microsoft
mso-    Microsoft Office
-moz-   Mozilla Foundation (Gecko-based browsers)
-o- Opera Software
-atsc-  Advanced Television Standards Committee
-wap-   The WAP Forum
-webkit-    Safari (and other WebKit-based browsers)
-khtml- Konqueror browser

http://reference.sitepoint.com/css/vendorspecific

Answer 3

所有这些事情基本上都设置了相同的风格，但针对不同的浏览器。

Answer 4

浏览器一直在实现自己的CSS扩展，因为在HTML5之前（或者更准确地说CSS3，在这种情况下）变得流行，但它们通常以稍微不同的方式实现。为了避免与其他浏览器发生冲突，Firefox将其“专有”扩展名加前缀为-moz，将Webkit加上-webkit等等。

这是MDN documentation。你完全不能google，因为它以连字符为前缀，将排除结果。 moz-border-radius-topleft会更有帮助。

Answer 5

每个浏览器的此属性的实现都不同。

前缀此属性的名称使样式与Firefox（-moz），chrome（-webkit）等兼容......

http://www.css3.info/preview/rounded-border/

jquery UI css文件

5 个答案: