正确选择CSS引入方式、补全浏览器前缀、控制加载顺序可提升跨浏览器兼容性。外部链接最稳定，@import在旧版IE中延迟明显；-webkit-、-moz-、-ms-等前缀需针对不同浏览器添加，推荐使用Autoprefixer自动处理；后引入的样式覆盖先引入的，关键CSS应通过link置于头部优先加载。
在前端开发中，CSS的引入方式和浏览器兼容性密切相关，尤其是在处理不同浏览器对CSS前缀的支持以及样式加载顺序的问题时。正确理解这些机制有助于避免样式失效或渲染异常。
常见的CSS引入方式及其兼容表现
CSS可以通过多种方式引入到HTML页面中，主要包括以下几种：
- 内联样式（Inline Styles）：直接写在HTML标签的style属性中。所有浏览器都支持，但维护性差，不推荐大规模使用。
- 内部样式表（Internal CSS）：通过<style>标签写在HTML文档的<head>中。兼容性良好，适用于单页特定样式。
- 外部样式表（External CSS）：使用<link rel="stylesheet" href="...">引入外部文件。这是最常用的方式，现代浏览器均支持，但在老版本IE中可能存在加载顺序问题。
- @import 导入：在CSS文件或<style>标签中使用@import引入其他CSS文件。性能较差，且在某些旧版浏览器中会阻塞渲染。
从兼容性角度看，外部链接方式是最稳定的选择。IE6及以上版本均能正常解析link标签引入的CSS，而@import在IE7及更早版本中存在异步加载问题，可能导致样式延迟应用。
-webkit-、-moz- 等前缀的浏览器支持差异
CSS前缀用于实现尚未标准化的实验性功能，在不同浏览器引擎中有不同的表现：
立即学习“前端免费学习笔记（深入）”；
- -webkit-：适用于Chrome、Safari、新版Edge以及大多数移动端浏览器（基于WebKit/Blink）。
- -moz-：Firefox专用，用于支持尚未完全标准化的特性。
- -ms-：主要针对IE8至IE11，部分属性需要该前缀才能生效。
- -o-：旧版Opera浏览器使用，现已被Blink取代，基本可忽略。
例如，使用flex布局时，IE10需要-ms-flexbox前缀，而早期Android浏览器可能需要-webkit-box。如果未添加必要的前缀，这些浏览器将无法正确渲染布局。
目前主流做法是借助Autoprefixer等工具自动补全前缀，根据目标浏览器范围生成兼容代码，减少手动维护成本。
样式加载顺序与覆盖规则的实际影响
CSS的加载顺序直接影响样式的最终表现，特别是在多文件引入时：
- 后加载的样式会覆盖先加载的同名规则（遵循层叠原则）。
- 使用link引入的CSS通常并行加载，但执行顺序仍按DOM中出现的顺序进行解析。
- @import导入的文件会在主CSS文件下载完成后才发起请求，造成额外延迟，尤其在低版本IE中更为明显。
在IE9及以下版本中，若通过JavaScript动态插入link标签，可能出现“样式未及时应用”的问题，因为IE对样式表的加载完成事件支持不一致。建议使用onload事件配合轮询检测样式是否生效。
为确保关键样式优先加载，应将核心CSS放在头部通过link引入，非关键资源可延迟加载或使用media属性控制加载时机。
基本上就这些。合理选择引入方式、补全必要前缀、控制加载顺序，能有效提升跨浏览器的一致性表现。不复杂但容易忽略细节。
