Byadmin
本指南旨在提供全面的 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”等工具，可实时跟踪浏览器支持状态，从而确保网站和应用在不同设备和浏览器中的一致性。