浏览器兼容问题
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; width:200px; height:200px;
border:1px solid red }
浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline
3）IE6下绝对定位的容器内文本无法正常选择的问题
div {
position:absolute; top:100px; left:100px; width:200px; height:200px;
border:1px solid red }
上面的问题在IE6、7中存在，解决问题的办法是让IE进入到quirks mode。
会碰到的问题见：
Css hack:
width:10px;//chrome
width:10px\9;或者width:10px !important;//ie8+
*width:10px;//ie7
_width:10px;//ie6
body{width:10px\9;}//ie8
:root body{width:10px\9;}//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
