兼容性问题

CSS兼容问题
1input中ie会有不同的显示

2border-radius  

解决：加背景图

3placeholder

placeholder,用js来解决，模拟placeholder;或者用label标签来模拟placeholder

4CSS控制透明度问题：一般就直接 opacity: 0.6 ; IE就 filter: alpha(opacity=60)

5正常盒模型width=content
IE盒模型width=content+padding
通过设置box-sizing:border-content这个时候的盒子width=content+padding+border

IEbug的解决：不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素或子元素

6 浮动双边距
当给一个div元素设置float属性后，margin值会加倍，解决方法:给 div 设置display:inline;
7 上下margin重合
ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。
8    无法设置微高
原因：ie6下会拒绝高度小于字号的设置
解决方案：font-size: 0; line-height:0;
9 png兼容
虽然可以通过JS等方式解决，但依然存在载入速度等问题，所以，这个在设计上能避免还是尽量避免为好。以达到网站最大优化。
10 伪类支持
ie6下hover伪类的bug，ie6只支持a:hover，其它的伪类不支持
解决办法是： 采用javascript或jQuery来解决。
在 ie6 下只有 a 才支持 :hover 伪类，其它标签都不支持，很是让人头疼。不过，可以通过 csshover.htc 可以解决 ie6 的 hover 兼容问题。它利用 js 脚本来给元素的的样式定义，如果检测到 hover 定义，就给元素设置 onmouseover 和 onmouseout 事件，以此来实现 hover 的效果。
11 设置元素的最小高度和最小宽度
原因： ie6中元素高度是根据内容的高度而变化的，并且无法识别min-height属性，所以要显示给容器设置height。
ie6不能识别属性min-height 和 min-width（IE6以上采用!important方法修复）？？!important在 CSS 中表示优先调用， ie6不能识别这个属性   height:auto !important

 js兼容问题
1监听文本框变化事件；用了input事件，但是ie不支持，所以加上了一句
f(!!window.ActiveXObject){
                reginp[i].onpropertychange = regfn;
            }else{
                EventUtil.addHandler(reginp[0],"input",regfn);
            ｝

2HTML5新出的API存在兼容性问题，这样可以解决

var oFirst = oParent.firstElementChild||oParent.firstChild                                     也可以这么写       
 var  oFirst = oParent.children[0];
var oLast = oParent.lastElementChild||oParent.lastChild                                     也可以这么写        
var  oLast = oParent.children[oParent.children.length-1];
var oNext = obj.nextElementSibling||obj.nextSibling                                   

var oPre = obj.previousElementSibling||obj.previousSibling

3窗口位置
Var leftPos = (typeof window.screenLeft == ‘number’)? Window.screenLeft :window.screenX;
Var topPos = (typeof window.screenTop == ‘number’)? Window.screenTop :window.screenY;

在火狐中存在screenX  screenY，其他浏览器存在screenLeft  screenTop

4窗口大小
var pageWidth = window.innerWidth,
      pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
     if (document.compatMode == "CSS1Compat"){
           pageWidth = document.documentElement.clientWidth;
           pageHeight = document.documentElement.clientHeight;
        } else {
          pageWidth = document.body.clientWidth;
          pageHeight = document.body.clientHeight;
      }
}

5ajax

function createXHR(){
    if (typeof XMLHttpRequest != "undefined"){
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined"){
        if (typeof arguments.callee.activeXString != "string"){
            var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
                i, len;
            for (i=0,len=versions.length; i < len; i++){
                try {
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                    } catch (ex){
                    //跳过
                        }
                    }
                }
            return new ActiveXObject(arguments.callee.activeXString);
            } else {
                throw new Error("No XHR object available.");
            }
    }

6事件

var EventUtil = {
    addHandler:function(ele,type,handler){
    if(ele.addEventListener){
    ele.addEventListener(type,handler,false);
    }else if(ele.attachEvent){
    ele.attachEvent("on"+type,handler);
    }else{
    ele["on"+type]=handler;
    }
    },
    removeHandler:function(){},
    preventDefault:function(ev){
    if(ev.preventDefault){
    ev.preventDefault();
    }else{
    ev.returnValue=false;
    }
    },
    stopPropagation:function(ev){
    if(ev.stopPropagation){
    ev.stopPropagation();
    }else{
    ev.cancelBubble=true;
    }
    }
    }