前端开发中遇到的兼容性问题

1.在页面中让图片360度旋转，因为要兼容Ie7,8,所以不能用css3的animation属性，引入了jQueryRotate.2.2.js插件,虽然Ie9转动，但Ie7、8图片是不转的。一直困扰我，后来终于解决了这个问题，原来在我的项目中我是用div的背景图片引入了这个图片，这样在ie7、8中图片是不转的。解决办法：用img标签引入这张图片，兼容性问题得到解决。

2.图片用Position:absolute定位的时候，在其他浏览器很正常，但是在ie7,8会产生图片错乱的现象。解决办法：采用css的hack方法，在属性后面添加\9，意思是只有ie9以下的浏览器才能识别这个属性。

.exclusiveCenterTop #exclusiveMove
{
width:400px;
height:400px;
position:absolute;
left:45px;
left:45px\9;
top:0px;

}

3.做登录页面时候，登录框要始终处在页面中央，但是在缩小浏览器窗口的时候，登录框不处在页面中央。解决办法：把让登录框居中的代码写在 window.onresize 函数中。

 window.onresize = function ()
            {
                var userContentHeight = $(window).height()-112;                             
                $(".login-page").css("height",userContentHeight);
                $(".login-box").css("height",userContentHeight);
                var liveLoginBoxH = $(".liveLoginBox").height();
                $(".liveLoginBox").css("top",(userContentHeight-liveLoginBoxH)/2);
            }

4.写适应手机的h5页面，不能只依靠谷歌自带的开发者模式适应手机屏调样式，还是要在手机上看样式。
5.做登录页面的时候，判断用户名、密码是否输入，输入是否错误，是后台判断的。没有用ajax，导致页面还没加载完就弹出弹框。出现的结果是背景图片没加载完，页面出现留白现象。解决办法：用setTimeout定时器让弹出框晚出现1秒钟。但是还是会有加载问题，就像堆积木似的。根本解决办法用ajax局部刷新来判断用户是否输入用户名、密码，输入是否错误。
6.在写页面的时候，前台引入了jquery-1.7.1.min.js，但是后台在写代码的时候也加入了jquery-1.7.1.min.js，页面底部是全局的（相当于一个插件，哪个页面需要底部，只需要两行代码引入就行<%@ Register Src="WebControl/Web_foot_new.ascx" TagName="Web_foot_new" TagPrefix="uc9" %>
<uc9:Web_foot_new ID="Web_foot_new" runat="server" />
），在里面新加动画，引入了jquery-1.7.1.min.js，也就是说现在一个页面有三个jquery-1.7.1.min.js。会影响页面的动画内容、页面上有的效果会没有。导致出现bug。如果一个页面有两个jquery-1.7.1.min.js，会导致页面底部的动画不显示。解决办法：一个页面有一个jquery-1.7.1.min.js就行，删除前台页面和底部引入的jquery-1.7.1.min.js，只保留后台引入的jquery-1.7.1.min.js。

7.jquery的animate函数里面的background-position属性应该这样写

$(this).find(".call_img2").stop().animate({"backgroundPositionX":"0px","backgroundPositionY" :"0px"},200);

8.ie7下的z-index值不兼容，当写z-index的值写absolute的时候，在他的父级要写z-index:1;