兼容性表格

全局行为:以下行为在很多浏览器都是全局范围内通用的

1 .值得注意的是，之前我找这些属性来看的时候，主要是为了为了可以改变，完全没想到浏览器的兼容性。这里给的提示确是让人小心使用，因为这些属性的修改可能会影响组件部分或者全部的原生外观。
2 .border,background,border-radius,height:小心使用
3 .避免使用：line-height:不同浏览器支持不同
4 .text-decoration:Opera表单不支持
5 .text-overflow:Opera,safari,IE9不支持
6 .text-shadow:Opera，IE9不支持

小总结

1 .怎么看起来好像就不应该用给的小组件，完全应该自己写呢，感觉js的兼容性比这个好多了
2 .https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Property_compatibility_table_for_form_controls

每个属性的四种取值

1 .yes:这个属性具有相当一致的跨浏览器支持，但是某些极端情况下，还是会有奇怪的副作用
2 .partial:尽管这个属性会生效，但是经常会面对奇怪的副作用和不一致性。应该尽量避免这些属性。
3 .no:这个属性不工作或者表现的非常不一致，不可靠
4 .N.A:这个属性对这个类型的组件没有任何意义

属性的渲染方式

1 .N:normal:属性会按照设置的那样应用
2 .T:tweaked:属性需要通过下列额外的规则来使用

apperance:none

text,seacrh,password相关组件

width,margin,font,letter-space,text-align，text-transform

1 .这个属性完全可以放心使用

height:partial,T

1 .webkit浏览器（mac和ios）上搜索框使用原生的样式和行为。所以需要webkit-apperance:none才能将这个属性应用到搜索域上
2 .windos7，ie9不会应用到边框上，除非background:none

border:partial,T

1 .webkit浏览器（mac和ios）上搜索框使用原生的样式和行为。所以需要webkit-apperance:none才能将这个属性应用到搜索域上
2 .windos7，ie9不会应用到边框上，除非background:none

padding:partial,T

1 .webkit浏览器（mac和ios）上搜索框使用原生的样式和行为。所以需要webkit-apperance:none才能将这个属性应用到搜索域上
2 .windos7，ie9不会应用到边框上，除非background:none

background

1 .webkit浏览器（mac和ios）上搜索框使用原生的样式和行为。所以需要webkit-apperance:none才能将这个属性应用到搜索域上
2 .windos7，ie9不会应用到边框上，除非background:none

border-radius

1 .webkit浏览器（mac和ios）上搜索框使用原生的样式和行为。所以需要webkit-apperance:none才能将这个属性应用到搜索域上
2 .windos7，ie9不会应用到边框上，除非background:none

color:N，T

1 .如果没有设置border-color:一些基于webkit的浏览器会将color属性应用到边框上，颜色和textarea的字体颜色一样

text-indent:P，P

1 .IE9只在textarea上支持这个属性,Opera只在单行文本域中支持
2 .

box-shadow:N,P

1 .IE9不支持这个属性

button,submit,reset,这些button组件

width，margin,color,font,letter-space,text-indent,text-transform,background,border-radius

1 .这些可以放心使用

height:P,T,padding,

1 .这个属性不能使用与mac osx和iso上基于webkit的浏览器
2 .不是吧，难道button都不能设置height，这个没见过啊,看起来是可以的啊

image.png

border:P,T，text-decoration,text-shadow

1 .表现不一致

text-align

1 .完全不支持

box-shadow

1 .IE9不支持这个属性

Number 类型

1 .实现了number的组件需要注意这些属性，这个就不看了吧，这里应该没有会使用原生的样式,并且在上面修改的，使用js实现明显是更好的方式，所以这种样式就不看了

checkbox,radio 类型

width，height，border，padding:N:no,T:no

1 .width和height属性，一些浏览器会添加额外的边缘，另一些会拉伸组件.但是这个好像我是用过的
2 .果然ant design的checkbox没有大小属性

text和font：这些完全不支持

1 .color,font,letter-spaceing,text-align,text-decoration,text-indent,text-overflow,text-shadow,text-transform

border和background:这些也完全不支持

1 .background,border-radius,box-shadow

Select 类型(单个选择)

1 .firefox不提供任何方式改变select元素的下箭头

width:N:partial,T:partial

1 .这个属性在select元素上一切正常,但是不能用于option或者optgroup元素

height：N:no,T:Yes

border:N:partial,T:Yes

margin:可以正常使用

padding:N:No,T:partial

color,font:N:partial,T:partial

1 .1. 在 Mac OSX 上， 基于 WebKit 的浏览器 不支持将这个属性用于原生组件。它们和 Opera, 在 <option> 和 <optgroup> 元素上根本不支持这个属性。

letter-spacing:N;partial,T:partial

1 .ie9不支持将这个属性用于select,option,optgroup元素
2 .Mac OSX上基于webkit的浏览器不支持将这个属性应用于option和optgroup元素

text-align:N:no,T:no

1 .windows 7上的ie9和mac osx上基于webkit的浏览器，不支持这个组件上的这个属性
2 .这里可以看到，除了浏览器，还有操作系统的兼容性

text-decoration:N:partial,T:partial

1 .只有firefox提供了对这个属性的完全支持。Opera根本不支持这个属性
2 .其他浏览器只提供了对select元素的支持
3 .

text-indent:N:partial,T:partial

1 .大部分浏览器只将这个属性用于select元素
2 .ie9不支持这个属性

text-overflow:这个属性完全不要使用

text-shadow:N:partial,T:partial

1 .大部分浏览器仅仅支持这个属性用于select元素
2 .ie9完全不支持

text-transform:N:partial,T:partial

1 .大部分浏览器仅仅支持将这个属性用于select元素，里面的option好像不行

background,border-radius:N:partial,T:partial

1 .大部分浏览器仅仅支持将这个属性用于select元素
2 .

box-shadow:N:no,T:partial

1 .这个属性也应该不要使用

select (多选情况)

width,height,border,margin，color,font,background,border-radius

1 .完全可以正常使用,你说奇怪不奇怪

padding：N:partial,T;partial

1 .在Opera中select元素不支持padding-top,padding-bottom

letter-spacing:N:partial,T:partial

1 .ie9在select，option，optgroup元素上不支持这个属性
2 .mac osx上基于webkit的浏览器在option和optgroup元素上不支持这个属性

text-align，text-decoration,text-indent,text-overflowmtext-shadow

1 .这些属性完全不要使用

text-transform

1 .大部分浏览器仅仅支持将这个属性用于select元素

box-shadow:N:NO,T:partial

1 .ie9不支持这个属性

datalist

1 .这个基本全部属性都不支持

file picker

width,height,border,padding,text-align,text-decoration,text-overflow,text-shadow,text-transform,border-radius

1 .这些属性完全不支持

margin,color

1 .这个属性完全支持

font,background

1 .支持，但是浏览器之间的不一致太多，所以不可靠

letter-sapcing:N:partial,T:partial

1 .许多浏览器将这个属性应用到选择按钮上

text-indent:N:partial,T:partial

1 .表现异常，像一个组件左侧的边缘

box-shadow:N:NO,T:partial

1 .ie9不支持这个属性

date pickers

1 .margin:只支持这一个属性，别的css熟悉都不支持

color pickers

width,border,margin

1 .这三个属性可以随便使用

height，padding:N:No,T:YES

1 .opera将他表现为一个选择组件，以同样的限制处理

不支持的属性

1 .color,font,letter-spacing,text-align,text-decoration,text-indent,text-overflow,text-shadow,text-transform

完全不要使用的属性

1 .background,border-radius,box-shadow;各个浏览器之间的不一致太多，并不可靠

meter和progress

width,height,margin

1 .这些属性可以随便使用

完全不要使用的属性

1 .background,border-radius
2 .box-shadow
3 .虽然支持，但是浏览器之间的不一致太多，不可靠

不支持的属性

1 .color,font,letter-spacing,text-align,text-decoration,text-indent,text-overflow,text-shadow,text-transform

padding:N:yes，T:partial

1 .当padding属性应用于一个tweaked元素时，Chrome会隐藏progress和meter元素

Range

width,margin

1 .这俩属性可以完全放心使用

完全不支持和不推荐使用的属性

1 .不支持：color,font,letter-spacing,text-align,text-decoration,text-indent,text-overflow,text-shadow,text-transform
2 .不推荐：background,border-radius

height:N:partial,T:partial

1 .Chrome和Opera在组件周围添加了额外的空白
2 .windows 7上Opera则拉升范围选择器的滑块

padding：N:partial,T:Yes

1 .padding属性被应用，但是没有任何视觉效果

image button

完全支持的属性

1 .width,height,border,margin,padding,background

完全不支持的属性

1 .color,font,letter-spacing,text-align,text-decoration,text-indent,text-overflow,text-shadow,text-transform

border-radius,box-shadow:N:partial,T:partial

1 .IE9不支持这个属性