css實現相容各個瀏覽器的技巧

IE6雙倍邊距問題
在IE6中查看時，卻會發現左側外邊距100像素，被擴大到200個像素，加上display: inline可解決;
.floatbox {
　　float: left;
　　width: 150px;
　　height: 150px;
　　margin: 5px 0 5px 100px;
　　display: inline;
}

解決IE6不支援position:fixed;屬性

常規 position:fixed; 實現方法
　　例：右下角 <div id="top">...</div> 這個 HTML 元素使用的 CSS 代碼如下：
　　#top{
　　　　position:fixed;
　　　　bottom:0;
　　　　right:10px;
　　}
　　實現讓 <div id="top">...</div> 元素固定在瀏覽器的底部和距離右邊的10個像素。

在 IE6中實現 position:fixed; 的辦法
#top{
　　position:fixed;
　　_position:absolute;
　　bottom:0;
　　right:10px;
　　_bottom:auto;
　　_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))
);
在 _position:absolute; 中的 _ 符號只有 IE6 才能識別，目的是為了區分其他瀏覽器

使元素固定在瀏覽器的頂部：
#top{
　　_position:absolute;
　　_bottom:auto;
　　_top:expression(eval(document.documentElement.scrollTop));
｝

使元素固定在瀏覽器的底部：
#top{
　　_position:absolute;
　　_bottom:auto;
　　_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}
這兩段代碼只能實現在最底部跟最頂部，可以使用 _margin-top:10px; 或者 _margin-bottom:10px; 修改其中的數值控制元素的位置

position:fixed; 閃動問題

用了上面的辦法後，會發現：被固定定位的元素在滾動捲軸的時候會閃動。解決閃動問題的辦法是在 CSS 檔案中加入：
*html{
　　background-image:url(about:blank);
　　background-attachment:fixed;
}
其中 * 是給 IE6 識別的。

js解決ie相容性

使IE5,IE6相容到IE7模式（推薦）
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js" type="text/javascript"></script>
<![endif]-->

使IE5,IE6,IE7相容到IE8模式
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js" type="text/javascript"></script>
<![endif]-->

使IE5,IE6,IE7,IE8相容到IE9模式
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

降級IE版本為7.0
<meta http-equiv="X-UA-ompatible" content="IE=EmulateIE7" />
另外;
<meta http-equiv="X-UA-Compatible" content="IE=7" />