此博文记录前端开发中遇到的问题

此文章记录前端开发中遇到的问题

浏览器兼容问题：

判断浏览器是否兼容css3和html5

可用modernizr插件，下载地址http://modernizr.cn/他不能为写好的属性做自动兼容，而是可以根据js，来进行判断，因此可以根据兼容与否，进行自定义的操作，例如：//如果浏览器支持background-size属性，就给#buttomButtom添加class为addImage        if (Modernizr.backgroundsize) {            $('#buttomButtom').addClass('addImage');        } 

使IE8以下兼容css3的background-size属性

在css上添加过滤器，例如：.buttomTopLeft{    background-image:url("/project/image/lunbo.png");    background-size:100% 100%;    width: 65%;    height: 100%;    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/project/image/lunbo.png',sizingMethod='scale');}这里filter的意思就是为background-size做一个过滤，这里要注意几点:一个是url的路径一定要和background-image的路径一致另一个是路径要写绝对路径，写了相对路径的会加载不出来图片。

对width和height做兼容

如果直接写height，width，意思是不管你怎样，就只显示这么大，但是如果div中的img将你的div撑开怎么办，样式就会混乱，这样的话可以为你的img在css中加这样一句话：width:expression(this.width>600?"600px":this.width+"px");这个意思是用了expression表达式，判断高度是不是超过了600px，超过了就强制显示600px，没有超过，就按找正常width显示。>expression表达式，意思就是将css和js联系在一起，支持IE5+>同时支持使用元素自身属性和方法，以及浏览器对象，也括号中应该为js表达式计算的结果>举个栗子：top:expression(document.body.offsetHeight-110+ "px");