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

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

浏览器兼容问题：

判断浏览器是否兼容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");