CSS兼容性详解

盒模型属性

【宽高width/height】

(全兼容)
width
height

(IE6-不支持)
min-width
max-width
min-height
max-height

【内边距padding】

padding

【边框border】

(全兼容)
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】

(全兼容)
margin

(IE不支持,且需要添加webkit或moz前缀)
margin-start
margin-end

(只有chrome和safari支持,且需要添加webkit前缀)-webkit-margin-before-webkit-margin-after

【轮廓outline】

(IE7-不支持)
outline
outline-width
outline-color
outline-style

(IE不支持)
outline-offset

【box-sizing】

  [注意]只有firefox支持padding-box属性值

(IE7-不支持)
box-sizing

布局类属性

【display】

  [注意]IE7-浏览器不支持table类属性值

(全兼容)
display

【浮动】

(全兼容)floatclear

【定位】

  [注意]IE6-不支持固定定位position:fixed

(全兼容)
position
left
right
top
bottom
z-index

【溢出相关】

(全兼容)
overflowoverflow-xoverflow-yclipvisibility

(IE不支持)resize

【flex】

(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

【grid】

(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
font-family
font-size
font-style
font-variant
font-weight
line-height
@font-face

【首行缩进text-indent】

(全兼容)
text-indent

【对齐】

  [注意]IE7-浏览器中vertical-align的百分比值不支持小数行高

--align

(safari浏览器、IOS、androis4.4-浏览器不支持)
text-align-last

【间隔】

(全兼容)
word-spacing
letter-spacing

【大小写text-transform】

(全兼容)
text-transform

【划线text-decoration】

(全兼容)
text-decoration

【空白符white-space】

  [注意]IE7-浏览器不支持pre-line和pre-wrap这两个属性值

(全兼容)
white-space

【换行】

  [注意1]W3C建议使用overflow-wrap替换word-wrap

  [注意2]移动端目前基本都不支持word-break的属性值keep-all 

--wrap

【文本方向】

-webkit--

【文本溢出text-overflow】

(全兼容)
text-overflow

【文本阴影text-shadow】

(IE9-不支持)
text-shadow

修饰类属性

【背景background】

(全兼容)
background
background-color
background-image
background-repeat
background-position

(IE8-不支持)
background-attachment
background-clip
background-size

【前景和透明度】

(全兼容)
color

(IE8-不支持)
opacity

【颜色模式】

  [注意]IE7-不支持color:transparent,但支持background-color: transparent和border-color: transparent

-

【光标cursor】

  [注意]IE7-不支持拓展样式

(全兼容)
cursor

【过渡transition】

(IE9-不支持,safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀)
transition-property
transition-duration
transiton-timing-function
transition-delay
transition

【变形transform】

(IE9-不支持,safari3.-、android2.-.、IOS3.----

【渐变gradient】

  IE9-不支持,safari4-5、IOS3.2-4.3、android2.1-3只支持线性渐变,且需要添加-webkit-;safari5.1-6、IOS5.1-6.1、android4-4.3支持线性和径向渐变,且需要添加-webkit-

【动画animation】

(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

【滤镜filter】

(IE浏览器及android4.3-浏览器不支持,android4.4+需要添加-webkit-前缀)
filter

【倒影box-reflect】

  只有chrome和safari浏览器支持,且需要添加-webkit-前缀

【will-change】

(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-不支持给<a>以外的其他元素设置伪类)
: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

【calc】 

  [注意]android4.4-4.4.4只支持加法和减法。IE9不支持用于backround-position

(IE8-、safari5.1-、ios5.1-、android4.3-不支持)
calc

【单位】

(全兼容)
pxincm
mm
q
pt
pc
em
ex
ch

(IE8-不支持)
rem

(IE8-浏览器不支持,IOS7.1-不支持,android4.3-不支持,对于vmax所有IE浏览器都不支持)
vh
vw
vmin
vmax
时间: 2024-08-28 19:11:50

CSS兼容性详解的相关文章

web前端课程大纲技术之css兼容性详解

1, 兼容性是什么? 同样的HTML+CSS+JS,但是表现出的外部特征还是不能达到统一,存在瑕疵.同样的代码,有的浏览器效果显示"正常",有的显示"不正常".就像同样的去吃大排档,就有的人吃完一点事没有,而有的人就会拉肚子. 2,为什么浏览器会存在兼容问题? 不同厂家开发所用的核心架构不同和代码很难重合,实现方式也有差异,所以呈现在页面上的样式也就会有一部分的差异,看着会有些不同.3,处理兼容问题的思路: 1):要不要去做?(看做的产品的影响程度,受众面,是主打效

彻底理解浮动float CSS浮动详解 清除浮动的方法

我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流.   注意:标准流使我们网页布局中最稳定的一种结构 2. 浮动流 使我们学习的脱离标准流的第一种方式.会影响我们标准流的排列.所以,我们布局的时候,能用标准流做的,就不用浮动做. 3. 定位流 定位流也是脱离标准流的一种模式.它完全脱离标准流,不会对标准流有影响. 浮动(float) 我们要浮动的目的: 我们浮动的目的,就是可以把多个块级元素放到想要

CSS选择器详解

CSS选择器详解 选择器是CSS的核心,从最初的元素.class/id选择器,演进到伪元素.伪类,以及CSS3中提供的更丰富的选择器,定位页面上的任意元素开始变得愈发的简单. 1.元素选择器 这是最基本的CSS选择器,HTML文档中的元素本身就是一个选择器: p {line-height:1.5em; margin-bottom:1em;} 2.关系选择器 E F:后代选择器,该选择器定位元素E的后代中所有元素F: ul li {margin-bottom:0.5em;} E > F:子选择器,

CSS优先级详解(权重详解)

CSS选择器权重值的计算 对于Css权重,现在网上很多版本都是这样计算的:内联样式1000点,ID100点,Class.伪类(pseudo-classes)或属性选择器10点,标签元素和伪元素(pseudo-elements)1点:虽然大多数时候是正确的但因为真正的原理并非如此,所以某些情况下会出错. css权重有ABCD四个值,A代表行间样式,B代表选择器中ID的数量,C代表选择器中类, 伪类, 属性选择器的数量,D代表标签元素和伪元素的数量. 具体理解请看例子: * {} A,B,C,D(0

带你走进CSS定位详解

学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bottom right left z-index position 基本语法: position:static | absolute | fixed | relative 语法介绍: static:默认值,无特殊定位. absoulte:相对于其最近的一个定位设置的父对象进行绝对定位,可用left,ri

CSS 计数器详解

在前端开发中总少不了列表项,对于列表项序号,射鸡师一般会列出个1,2,3...序号.在不了解css计数器属性之前,我一般会用精灵图,用类名来区分序列号图片.这样做尽管可以达到目的,但是很不方便,开发过程耗时较长而且维护修改起来较困难.用css counter配合伪类的content完美的解决了这个问题,这里详细介绍下css counter属性 计数器属性介绍 计数器的值通过使用counter-reset 和 counter-increment 操作,在 content 上应用 counter()

CSS长度单位详解

序言 长度单位可以总体的分为绝对长度单位和相对长度单位.CSS中最为大家熟知的无疑是px和em,但与此同时还存在pt, rem, vw, vh等其他计量单位,使用好它们可以大大增长我们的开发效率.本篇文章试图整理在前端开发中用到的CSS单位和其应用场景. px——像素 px是pixel缩写,是基于像素的单位.在浏览网页过程中,屏幕上的文字.图片等会随屏幕的分辨率变化而变化,一个100px宽度大小的图片,在800×600分辨率下,要占屏幕宽度的1/8,但在1024×768下,则只占约1/10.所以

css line-height详解

转自http://www.cnblogs.com/dolphinX/p/3236686.html 初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那么简单,最近看了一些关于行高的知识,就此总结一下. 所谓行高是指文本行基线间的垂直距离.要想理解这句话首先得了解几个基本知识: 顶线.中线.基线.底线 <!DOCTYPE html> <html> <head>

CSS系列(6) CSS通配符详解

通配符使用星号*表示,意思是“所有的”. 平时使用电脑,比如要搜索C盘里所有的网页,可以使用 *.html来搜索,.html是网页的后缀名,*代表了所有网页的名称: 也就是使用 * 加后缀名,就可以在电脑中搜索文件. 在CSS中,同样使用 * 代表所有的标签或元素,它叫做通配符选择器. 比如:* { color : red; } 这里就把所有元素的字体设置为红色. *会匹配所有的元素,因此针对所有元素的设置可以使用*来完成,用的最多的例子如下: *{margin:0px; padding:0px