瀏覽器兼容問題

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。

會碰到的問題見：

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

 

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