正在加载...
CSS 浏览器支持完整参考
本指南旨在提供全面的 CSS 浏览器支持参考，帮助开发者规划跨浏览器的兼容性策略。涵盖从基础 CSS 属性到现代特性，如 Flexbox、Grid 以及 CSS4 的伪类选择器（Pseudo-classes）。通过本指南，开发者可以快速查找每个属性在主流浏览器（Chrome、Firefox、Safari、Edge、IE、iOS Safari 和 Android 浏览器）中的支持情况及首次支持版本。所有特性均按类别组织，便于查阅和对比。使用本指南可以确保网站和应用在各类设备和浏览器中保持一致的表现，提高开发效率并减少兼容性问题。
📊 Basic CSS Properties Support
| Property | Chrome | Firefox | Safari | Edge | IE | iOS Safari | Android | First Support | Notes |
|---|---|---|---|---|---|---|---|---|---|
| color | 1 | 1 | 1 | 12 | 3 | 1 | 1 | CSS 1 | 全面支持 |
| background-color | 1 | 1 | 1 | 12 | 4 | 1 | 1 | CSS 1 | 全面支持 |
| font-family | 1 | 1 | 1 | 12 | 3 | 1 | 1 | CSS 1 | 全面支持 |
| margin | 1 | 1 | 1 | 12 | 3 | 1 | 1 | CSS 1 | 全面支持 |
| padding | 1 | 1 | 1 | 12 | 3 | 1 | 1 | CSS 1 | 全面支持 |
| border | 1 | 1 | 1 | 12 | 4 | 1 | 1 | CSS 1 | 全面支持 |
| width | 1 | 1 | 1 | 12 | 4 | 1 | 1 | CSS 1 | 全面支持 |
| height | 1 | 1 | 1 | 12 | 4 | 1 | 1 | CSS 1 | 全面支持 |
| display | 1 | 1 | 1 | 12 | 4 | 1 | 1 | CSS 1 | 全面支持 |
| position | 1 | 1 | 1 | 12 | 4 | 1 | 1 | CSS 2 | 全面支持 |
| float | 1 | 1 | 1 | 12 | 4 | 1 | 1 | CSS 1 | 全面支持 |
📊 CSS3 Properties Support
| Property | Chrome | Firefox | Safari | Edge | IE | iOS Safari | Android | First Support | Notes |
|---|---|---|---|---|---|---|---|---|---|
| border-radius | 5 | 4 | 5 | 12 | 9 | 4 | 2.1 | CSS3 | 旧版本需 -webkit- 前缀 |
| box-shadow | 10 | 4 | 5.1 | 12 | 9 | 5 | 4 | CSS3 | 旧版本需 -webkit- 前缀 |
| text-shadow | 2 | 3.5 | 4 | 12 | 10 | 4 | 2.1 | CSS3 | 无需前缀 |
| opacity | 1 | 1 | 2 | 12 | 9 | 2 | 1 | CSS3 | IE8 使用 filter: alpha() 兼容 |
| rgba() | 1 | 3 | 3.1 | 12 | 9 | 3.2 | 2.1 | CSS3 | 老版本需 hex 兼容 |
| transform | 36 | 16 | 9 | 12 | 9 | 9 | 3 | CSS3 | 旧版本需 -webkit- 前缀 |
| transition | 26 | 16 | 9 | 12 | 10 | 9 | 4 | CSS3 | 旧版本需 -webkit- 前缀 |
| linear-gradient | 26 | 16 | 7 | 12 | 10 | 7 | 4.4 | CSS3 | 前缀要求较高 |
📊 Flexbox Support
| Property | Chrome | Firefox | Safari | Edge | IE | iOS Safari | Android | First Support | Notes |
|---|---|---|---|---|---|---|---|---|---|
| display: flex | 29 | 28 | 9 | 12 | 11 | 9 | 4.4 | CSS3 | IE10-11 使用 -ms-flex |
| flex-direction | 29 | 28 | 9 | 12 | 11 | 9 | 4.4 | CSS3 | IE 使用不同语法 |
| flex-wrap | 29 | 28 | 9 | 12 | 11 | 9 | 4.4 | CSS3 | 仅 IE11+ 支持 |
| justify-content | 29 | 28 | 9 | 12 | 11 | 9 | 4.4 | CSS3 | IE 使用 -ms-flex-pack |
| align-items | 29 | 28 | 9 | 12 | 11 | 9 | 4.4 | CSS3 | IE 使用 -ms-flex-align |
| flex-grow | 29 | 28 | 9 | 12 | 11 | 9 | 4.4 | CSS3 | IE 使用 -ms-flex-positive |
| flex-shrink | 29 | 28 | 9 | 12 | 11 | 9 | 4.4 | CSS3 | IE 使用 -ms-flex-negative |
| order | 29 | 28 | 9 | 12 | 11 | 9 | 4.4 | CSS3 | IE 使用 -ms-flex-order |
📊 CSS Grid Support
| Property | Chrome | Firefox | Safari | Edge | IE | iOS Safari | Android | First Support | Notes |
|---|---|---|---|---|---|---|---|---|---|
| display: grid | 57 | 52 | 10.1 | 16 | 10 | 10.3 | 57 | CSS3 | IE10-11 使用旧语法和 -ms- 前缀 |
| grid-template-columns | 57 | 52 | 10.1 | 16 | 10 | 10.3 | 57 | CSS3 | IE 使用 -ms-grid-columns |
| grid-template-rows | 57 | 52 | 10.1 | 16 | 10 | 10.3 | 57 | CSS3 | IE 使用 -ms-grid-rows |
| grid-gap | 57 | 52 | 10.1 | 16 | No | 10.3 | 57 | CSS3 | 新语法使用 gap |
| grid-column | 57 | 52 | 10.1 | 16 | 10 | 10.3 | 57 | CSS3 | IE 使用 -ms-grid-column |
| grid-row | 57 | 52 | 10.1 | 16 | 10 | 10.3 | 57 | CSS3 | IE 使用 -ms-grid-row |
| justify-items | 57 | 52 | 10.1 | 16 | 11 | 10.3 | 57 | CSS3 | IE 支持有限 |
📊 Modern CSS Features Support
| Property | Chrome | Firefox | Safari | Edge | IE | iOS Safari | Android | First Support | Notes |
|---|---|---|---|---|---|---|---|---|---|
| custom properties | 49 | 31 | 9.1 | 16 | No | 9.3 | 49 | CSS3 | IE 不支持 |
| calc() | 26 | 16 | 7 | 12 | 9 | 7 | 4.4 | CSS3 | 旧版本函数支持有限 |
| clamp() | 79 | 75 | 13.1 | 79 | No | 13.4 | 79 | CSS4 | 仅现代浏览器支持 |
| filter | 53 | 35 | 9.1 | 12 | No | 9.3 | 53 | CSS3 | IE 使用 -ms-filter 支持有限 |
| clip-path | 55 | 3.5 | 13.1 | 12 | No | 13.1 | 55 | CSS3 | 需 -webkit- 前缀 |
| object-fit | 32 | 36 | 10 | 16 | No | 10 | 32 | CSS3 | IE 不支持 |
| aspect-ratio | 88 | 89 | 15 | 88 | No | 15 | 88 | CSS4 | 仅现代浏览器支持 |
📊 Pseudo-class Support
| Selector | Chrome | Firefox | Safari | Edge | IE | iOS Safari | Android | First Support | Notes |
|---|---|---|---|---|---|---|---|---|---|
| :hover | 1 | 1 | 1 | 12 | 4 | 1 | 1 | CSS1 | 全面支持 |
| :focus | 1 | 1 | 1 | 12 | 8 | 1 | 1 | CSS2 | 全面支持 |
| :first-child | 1 | 1 | 3 | 12 | 7 | 1 | 1 | CSS2 | 全面支持 |
| :last-child | 1 | 1 | 3 | 12 | 9 | 1 | 1 | CSS3 | 仅 IE9+ 支持 |
| :nth-child() | 1 | 3.5 | 3 | 12 | 9 | 3.2 | 1 | CSS3 | 仅 IE9+ 支持 |
| :not() | 1 | 1 | 3.2 | 12 | 9 | 3.2 | 1 | CSS3 | IE9+ 限制支持 |
| :focus-visible | 86 | 85 | 15.4 | 86 | No | 15.4 | 86 | CSS4 | 仅现代浏览器支持 |
| :has() | 105 | 121 | 15.4 | 105 | No | 15.4 | 105 | CSS4 | 仅非常现代浏览器支持 |
Cross-Browser Examples
css
CSS Code
/* 跨浏览器重置 */
* {
box-sizing: border-box;
}
/* Flexbox 向后兼容 */
.flex-container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
/* Grid 向后兼容 IE */
.grid {
display: -ms-grid;
display: grid;
}为了保证最大浏览器兼容性，应为新的 CSS 属性提供备用方案，并采用渐进增强策略。务必在目标浏览器上进行测试，尤其是移动端 Safari 和 IE。可使用 CSS 预处理器或 Autoprefixer 自动添加前缀。对于现代特性，如 Grid 和 Flexbox，可使用 @supports 条件应用，保证旧版浏览器正常显示。关注受众浏览器市场份额，并在必要时提供轻量级替代方案。结合 “Can I Use”等工具，可实时跟踪浏览器支持状态，从而确保网站和应用在不同设备和浏览器中的一致性。
🧠 测试您的知识
准备开始
Browser Support Knowledge Check
测试你对 CSS 浏览器支持和兼容性的知识。
2
问题
70%
及格要求
∞
时间
∞
尝试次数
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部