浏览器兼容问题

1）超链接访问过后hover样式就不出现

解决方法是改变CSS属性的排列顺序: L-V-H-A

a:link { color:red } 

a:visited { color:green } 

a:hover { color:blue } 

a:active { color:orange }

2）IE6的双倍边距BUG

div { 

float:left; 

margin-left:10px; 200px; height:200px; 

border:1px solid red }

浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline

3）IE6下绝对定位的容器内文本无法正常选择的问题

div { 

position:absolute; top:100px; left:100px; 200px; height:200px; 

border:1px solid red }

上面的问题在IE6、7中存在，解决问题的办法是让IE进入到quirks mode。

会碰到的问题见：

http://wenku.baidu.com/link?url=uKP9I17cCIQCGhKRTnjv6w4caxqewXeVAPAdfbgCB5d1Bf2i_YLUq8o1sM-EE7UL6OxFj4Xpc5OxV1Xj6SxlSb01crWJNEXUvEW3j4iBL6S

Css hack:

10px;//chrome 

10px9;或者10px !important;//ie8+ 

*10px;//ie7 

_10px;//ie6 

body{10px9;}//ie8 

:root body{10px9;}//ie9+ 

IE8和IE9  用js方法兼容

设置一个span的长度时，chrome下为165px可以对齐；但是在ie8下，需要167px才能对齐；在ie9下，这个数字是162px。

通过判断浏览器的版本来加载不同的CSS文件来解决

<script type="text/javascript">

var href = '';

if($.browser.msie){

       var version = $.browser.version;

    if(version=="8.0"){

href = "${pageContext.request.contextPath}/businessFlow/md/mdmquery/css/ie8.css";

    }else if(version=="9.0"){

href = "${pageContext.request.contextPath}/businessFlow/md/mdmquery/css/ie9.css";

    }

}

$('<link rel="stylesheet" type="text/css" href="' + href +'"/>').appendTo('head');

</script>

Js兼容：采用jQuery