为何多数浏览器支持-webkit前缀？Firefox与Safari实测异常问询
2026-6-17
关于Firefox与Safari支持-webkit前缀的疑问解答
核心结论
Firefox和Safari并没有统一使用-webkit属性，你观察到的现象是两款浏览器不同兼容策略导致的，测试本身没有疏漏。
具体分析
Safari的-webkit支持：Safari基于WebKit内核开发，
-webkit-本来就是WebKit系浏览器的原生厂商前缀，所以它支持-webkit-border-radius、-webkit-text-stroke这类属性是原生行为，完全符合预期。Firefox的-webkit兼容：Firefox采用Gecko内核，本身并非WebKit系，但为了兼容大量老旧网站的遗留CSS代码，Firefox从较新版本开始对部分常见-webkit前缀属性做了兼容处理：
- 对于已经成为标准的属性（比如
border-radius），即使写了-webkit-前缀，Firefox也会识别并生效； - 对于没有其他厂商前缀替代的属性（比如
text-stroke只有-webkit-前缀版本），Firefox也会兼容以保证内容正常显示； - 但Firefox不会反向兼容
-o-、-ms-这类其他厂商的前缀，同时对未启用的属性给出提示，这是它兼容逻辑的正常表现，并非改用了WebKit内核。
- 对于已经成为标准的属性（比如
补充说明
Firefox的-webkit兼容是有限范围的，仅针对一些常用、标准化或无替代方案的属性，并非所有-webkit前缀属性都能被识别。如果测试一些WebKit专属的实验性属性，Firefox依然不会支持。
测试代码
<!DOCTYPE html> <html> <head> <style> .test { -webkit-border-radius: 30px; -webkit-text-stroke: 2px blue; text-align: center; background-color: red; } </style> </head> <body> <h1 class="test">Test</h1> </body> </html>
内容的提问来源于stack exchange，提问作者NonerDude
相关产品推荐
相关产品推荐
