Chrome&Safari:-webkit-
Firefox:-moz-
IE:-ms-
Opera:-o-
1.渐变属性
各浏览器的新版本都支持渐变属性。对于不支持的低版本浏览器,可以通过增加浏览器前缀的方式,让浏览器支持渐变。
比如:background:-moz-linear-gradient();
2.IE8 以下版本不支持H5新标签
<header>、<nav>等标签在IE8无法渲染。html5shiv.js可帮助IE6-8浏览器兼容HTML5语义化标签。
3.IE8不支持CSS媒体查询,对响应式设计大大不利。
Respond.js可帮助IE6-8兼容“min/max-width”媒体查询条件。。
使用方法:在页面中所有css文件的引用位置之后引用Respond.js。而且Respond.js的引用得越早,用户看到页面闪烁的机会越小。
4.em的“相对于其父元素来设置字体大小”
rem是相对于根元素<html>的字体大小比率单位
5.background-size”是CSS3新引入的属性,其中有两个属性值非常常用,分别为“cover”和“contain”。
“cover”可以把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中。
“contain”可以把图像宽或高扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
IE8同样不支持,非常不方便。这时可以引用“background-size polyfill”库来兼容。
6.css hack Hack有风险,使用需谨慎
7.IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin为双倍距离
解决: display:inline display:table
8.3像素问题---IE6及其更低的版本
两个相邻的div之间有3个像素的空隙,一个div使用了float,而另一个没有使用产生的。
解决方法:对另一个div也使用float /_margin-right:-3px.(IE6以及更低版本的hack
9.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none
10.超链接访问过后hover样式就不出现了
改变CSS属性的排列顺序 L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
11.Firefox点击链接出现的虚线框
去掉虚线框a{outline:none;} a:focus{outline:none;}
12.浏览器默认的margin和padding不同
解决方案是加一个全局的*{margin:0;padding:0;}来统一;我一般使用normalize css,清除默认样式
13.IE5-IE8不支持opacity
解决方法:添加ie滤镜alpha,如下:
Opacity:0.8;
Filter:alpha(opacity=80);
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(opacity=80)”;
14.IE6不能定义1px左右宽度的容器--因为行高line-height在IE6下有默认值
解决方法:line-height:1px;overflow:hidden;zoom:0.08
15.IE6不支持min-* IE6在解析时,会自动延长元素的高度。
解决方法:利用IE6不识别!Important,给元素设置固定高度,并且设置元素高度自动。
Height: auto ! important;
height:300px;
min_height:300px;
16.IE6、IE7不支持原生JSON对象,可载入json2.js补丁来达到兼容
17.IE8的数组对象没有forEach方法---自己声明
18.旧浏览器不支持新的API 例如IE8不支持Array 的indexOf()
19.IE6不支持png-24透明图片--在IE6浏览器上,使用png24为的图片不透明,出现背景
解决:图片使用gif格式,或者png-8格式图片
20.IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性。
解决方法:统一通过getAttribute()获取自定义属性。