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

【浮动】

(全兼容)

float

clear

【定位】

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

(全兼容)

position

left

right

top

bottom

z-index

【溢出相关】

(全兼容)

overflow

overflow-x

overflow-y

clip

visibility

(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的百分比值不支持小数行高

(全兼容)

text-align

vertical-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 

(全兼容)

word-wrap

word-break

(IE不支持)

overflow-wrap

【文本方向】

(全兼容)

direction

unicode-bidi

(safari和移动端IOS和android需要添加-webkit-前缀;IE浏览器只支持自己的私有属性值)

writing-mode

【文本溢出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

(全兼容)

命名颜色

16进制

RGB

(IE8-不支持)

currentColor

RGBA

HSL

HSLA

【光标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.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前缀)

transform

transform-origin

transform-style

perspective

perspective-origin

backface-visibility

【渐变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

【单位】

(全兼容)

px

in

cm

mm

q

pt

pc

em

ex

ch

(IE8-不支持)

rem

(IE8-浏览器不支持,IOS7.1-不支持,android4.3-不支持,对于vmax所有IE浏览器都不支持)

vh

vw

vmin

vmax

Image placeholder
前端答疑
未设置
  12人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css不同浏览器兼容性问题怎么解决?

css不同浏览器兼容性问题的解决方案1.浏览器CSS样式初始化由于每个浏览器的css默认样式不尽相同,所以最简单有效的方式就是对其进行初始化,相信很多朋友都写过这样的代码,在所有CSS开始前,先把ma

js如何修改css属性?

js如何修改css属性?1、修改style样式:通过document.styleSheets[n]//n表示期望修改的样式表序号,从0开始计数来获取到期望修改的样式表,通过cssRules[0]获取到

css属性是什么?

层叠样式表是一个完全的纯文本文件,通常以“css”为扩展名作为单独的文件来使用,它的内容包含了一组告诉浏览器,如何安排与显示特定的html标签中内容的规则。CSS定义规则由三个部分构成:选择符,属性和

css属性选择器有哪些?

css属性选择器有哪些?[attribute]用于选取带有指定属性的元素。该选择器选择包含attribute属性的所有元素,不论attribute的值为何。[attribute=value]用于选取带

CSS属性

CSS属性3尺寸widthheigth设置宽和高;4:背景;background5:盒子模型控制布局内外边距Float浮动:可以调整位置; 胡澳宾

打造自适应网站只用一个CSS属性就够了

推荐课程:JAVA开发工程师--学习猿地--送7个上线商业项目 用一个CSS属性创建一个响应式网站,让我们来看看它是如何做到的。🤔以这个模板为例,没有应用css属性。🖥使用clamp()CSS函数,我

安防摄像头网页无插件直播流媒体服务器EasyNVR在IE浏览器下的 pointer-events- none前端兼容性调试

背景说明由于互联网的飞速发展,传统安防摄像头的视频监控直播与互联网直播相结合是大势所趋。传统安防的直播大多在一个局域网内,在播放的客户端上也是有所限制,一般都需要OCXWeb插件进行直播。对于安防监控

兼容性常规检测

引子碰到检查支持font-family的疑问,一时想不出,查了资料后解惑。顺便在此对是否支持的检测方式,进行一些基本的归纳。 Origin MyGitHub HTML检测浏览器并不会对HTML进行编译

css属于脚本语言吗?

css属于脚本语言吗?css不属于脚本语言,它是层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言。另外HTML也不是脚本语言,HTML是超文本标记语言,用来描述文档结构的。脚本语言脚本

css中Position属性图文详解

1.介绍1.1说明Position属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示。1.2主要的值①absolute:绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。

css样式不兼容怎么办?

1、使用浏览器私有属性我们经常会在某个CSS的属性前添加一些前缀,比如-webkit-,-moz-,-ms-,这些就是浏览器的私有属性。为什么会出现私有属性呢?这是因为制定HTML和CSS标准的组织W

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

css栅格布局图文详解

圣杯布局圣杯布局是一种三列布局,两边定宽,中间自适应:css:*{ box-sizing:border-box; } html,body{ width:100%; height:100%; margi

css优先级详解

样式的优先级多重样式(MultipleStyles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。一般情况下,优先级如下:(外部样式)Externalstyleshee

css清除浮动图文详解

什么是CSS清除浮动?在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度

表单元素无法继承CSS font字体设置详解

课程推荐:Java开发工程师--学习猿地精品课程 编者:CSS里面表单元素input,button,textarea,select等并不继承body的字体设置,它会使用系统或者浏览器自身的设置。通过这

css如何清除a标签的block属性

css如何清除a标签的block属性a标签默认是inline行内元素,不支持设置宽高等属性。为了让a标签支持宽高属性,我们可以设置a{display:block}将它变成块级元素同样的,清除a标签的b

css设置边框可以用哪个属性?

css设置边框可以用border简写属性,它可以在一个声明设置所有的边框属性,按照border-width、border-style、border-color顺序设置;也可以单独使用这几个属性来设置边

css有不可继承属性吗?

css继承性:CSS继承可定义为特定的css属性向下传递到子孙元素,就是指被包在内部的标签将拥有外部标签的样式,即子元素可以继承父元素的属性。继承是一种规则,它允许样式不仅应用于某个特定html标签元

css定位(position)属性怎么用?

position属性规定元素的定位类型。说明position属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于

css图片属性如何设置?

css图片属性如何设置?首先新建一个style标签;然后在style标签内使用语法img{属性:值}即可,比如设置图片边框属性img{border:1pxsolidred}。语法:img{ 属性:值;

css right属性不生效怎么办?

cssright属性不生效怎么办?cssright属性不生效是因为元素的position属性值为static,解决方法是将元素的position属性的值改为relative、absolute、fixe

值得收藏的一些 CSS 属性选择器!

属性选择器非常神奇。它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题。但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用。在本文中,我们将讨论它们是如何运行的,并

css中变换属性有哪些?

css中变换属性有哪些?1、matrixmatrix(,,,,,)以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵2、tra

css中font属性能不按顺序吗?

css中font属性能不按顺序吗?不能,font属性的书写必须按照顺序。css中的复合属性,有的可以不按照顺序,有的不行的,border的顺序可以乱,但是font的就不能乱。(推荐学习:CSS视频教程