CSS兼容性详解
2021-06-21 12:05
标签:lang text 元素选择器 宽高 page 空白 script cal disable 对于前端工程师来说,不想面对又不得不面对的一个问题就是兼容性。在几年之前,处理兼容性,一般地就是处理IE低版本浏览器的兼容性。而近几年,随着移动端的发展,工程师也需要注意手机兼容性了。本文将详细介绍CSS兼容性 【宽高width/height】 【内边距padding】 【边框border】 【外边距margin】 【轮廓outline】 【box-sizing】 [注意]只有firefox支持padding-box属性值 【display】 [注意]IE7-浏览器不支持table类属性值 【浮动】 【定位】 [注意]IE6-不支持固定定位position:fixed 【溢出相关】 【flex】 【多列布局】 【grid】 【字体font】 【首行缩进text-indent】 【对齐】 [注意]IE7-浏览器中vertical-align的百分比值不支持小数行高 【间隔】 【大小写text-transform】 【划线text-decoration】 【空白符white-space】 [注意]IE7-浏览器不支持pre-line和pre-wrap这两个属性值 【换行】 [注意1]W3C建议使用overflow-wrap替换word-wrap [注意2]移动端目前基本都不支持word-break的属性值keep-all 【文本方向】 【文本溢出text-overflow】 【文本阴影text-shadow】 【背景background】 【前景和透明度】 【颜色模式】 [注意]IE7-不支持color:transparent,但支持background-color: transparent和border-color: transparent 【光标cursor】 [注意]IE7-不支持拓展样式 【过渡transition】 【变形transform】 【渐变gradient】 【动画animation】 【混合模式】 【滤镜filter】 【倒影box-reflect】 只有chrome和safari浏览器支持,且需要添加-webkit-前缀 【will-change】 【表格】 【分页】 【选择器】 【伪类】 【伪元素】 【关键字】 【calc】 [注意]android4.4-4.4.4只支持加法和减法。IE9不支持用于backround-position 【单位】 CSS兼容性详解 标签:lang text 元素选择器 宽高 page 空白 script cal disable 原文地址:http://www.cnblogs.com/xiaohuochai/p/7163370.html前面的话
盒模型属性
(全兼容)
width
height
(IE6-不支持)
min-width
max-width
min-height
max-height
padding
(全兼容)
border
border-width
border-color
border-style
(IE8-不支持)
border-radius
(IE10-不支持)
border-image
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
(只有firefox支持,需要添加-moz-前缀)
border-colors
(全兼容)
margin
(IE不支持,且需要添加webkit或moz前缀)
margin-start
margin-end
(只有chrome和safari支持,且需要添加webkit前缀)
-webkit-margin-before
-webkit-margin-after
(IE7-不支持)
outline
outline-width
outline-color
outline-style
(IE不支持)
outline-offset
(IE7-不支持)
box-sizing
布局类属性
(全兼容)
display(全兼容)
float
clear
(全兼容)
position
left
right
top
bottom
z-index
(全兼容)
overflow
overflow-x
overflow-y
clip
visibility
(IE不支持)
resize(IE9-不支持)
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
align-self
flex-basis
flex-grow
flex-shrink
flex
order
(IE10+和chrome浏览器支持标准写法,firefox、safari浏览器及移动端android、IOS需要添加前缀)
column-width
column-count
column-gap
column-rule
column-span(firefox不支持该属性)
columns
(只有firefox支持带前缀的column-fill属性)
column-fill
(IE9-不支持,IE10+需要添加-ms-前缀,android4.4.4-不支持,IOS10.2-不支持)
grid-template-rows
grid-template-columns
grid-template-areas
grid-column-gap
grid-row-gap
grid-gap
grid-row-start
grid-row-end
grid-row
grid-column-start
grid-column-end
grid-column
grid-area
grid-auto-flow
grid-auto-rows
grid-auto-columns
justify-items
justify-self
align-items
align-self
文本类属性
(全兼容)
font
font-family
font-size
font-style
font-variant
font-weight
line-height
@font-face
(全兼容)
text-indent
(全兼容)
text-align
vertical-align
(safari浏览器、IOS、androis4.4-浏览器不支持)
text-align-last(全兼容)
word-spacing
letter-spacing
(全兼容)
text-transform
(全兼容)
text-decoration
(全兼容)
white-space
(全兼容)
word-wrap
word-break
(IE不支持)
overflow-wrap(全兼容)
direction
unicode-bidi
(safari和移动端IOS和android需要添加-webkit-前缀;IE浏览器只支持自己的私有属性值)
writing-mode(全兼容)
text-overflow
(IE9-不支持)
text-shadow
修饰类属性
(全兼容)
background
background-color
background-image
background-repeat
background-position
(IE8-不支持)
background-attachment
background-clip
background-size
(全兼容)
color
(IE8-不支持)
opacity
(全兼容)
命名颜色
16进制
RGB
(IE8-不支持)
currentColor
RGBA
HSL
HSLA(全兼容)
cursor
(IE9-不支持,safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀)
transition-property
transition-duration
transiton-timing-function
transition-delay
transition
(IE9-不支持,safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前缀)
transform
transform-origin
transform-style
perspective
perspective-origin
backface-visibility IE9-不支持,safari4-5、IOS3.2-4.3、android2.1-3只支持线性渐变,且需要添加-webkit-;safari5.1-6、IOS5.1-6.1、android4-4.3支持线性和径向渐变,且需要添加-webkit-
(IE9-不支持;safari4-8、IOS3.2-8.4、android2.1-4.4.4需要添加-webkit-前缀)
animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-play-state
animation-fill-mode
(IE浏览器、android4.4-不支持,safari和IOS需要添加-webkit-前缀)
mix-blend-mode
background-blend-mode
isolation
(IE浏览器及android4.3-浏览器不支持,android4.4+需要添加-webkit-前缀)
filter
(IE13+、chrome49+、safari9.1+、IOS9.3+、Android52+)
will-change
其他类属性
(全兼容)
border-collapse
table-layout
caption-side
(IE7-不支持)
border-spacing
empty-cells
(全兼容)
page-break-after
page-break-before
page-break-inside
(IE7-不支持)
orphans
(IE及手机端不支持)
windows
(全兼容)
通配选择器 *
元素选择器 div
类选择器 .box
ID选择器 #box
后代选择器 div a
分组选择器 h1,p
(IE6-不支持)
属性选择器 h1[class]
子元素选择器 ul > li
相邻兄弟选择器 div + p
(IE7-不支持)
通用兄弟选择器 div ~ p
(全兼容)
:link
:visited
(IE6-不支持给以外的其他元素设置伪类)
:hover
:active
(IE7-不支持)
:focus
:lang()
(IE8-不支持)
:target
:enabled
:disabled
:checked
:nth-child(n)
:nth-last-child(n)
:first-child
:last-child
:only-child
:nth-of-type(n)
:nth-last-of-type(n)
:first-of-type
:last-of-type
:only-of-type
:root
:not
:empty
:target
(只有当选择器部分和左大括号之间有空格时,IE6-浏览器才支持)
:first-letter
:first-line
(IE7-不支持)
:before
:after
(IE8-不支持)
::selection
(IE7-浏览器不支持)
inherit
(IE浏览器不支持)
initial
(IE不支持,safari9-不支持,ios9.2-不支持,android4.4.4-不支持)
unset
all
(只有safari9.1+和ios9.3+支持)
revert
(IE8-、safari5.1-、ios5.1-、android4.3-不支持)
calc
(全兼容)
px
in
cm
mm
q
pt
pc
em
ex
ch
(IE8-不支持)
rem
(IE8-浏览器不支持,IOS7.1-不支持,android4.3-不支持,对于vmax所有IE浏览器都不支持)
vh
vw
vmin
vmax
上一篇:mark Pay http://git.oschina.net/littleCrazy/dianshangpingtai-zhifu/blob/master/OrderPayController
下一篇:php 单例模式