css ie6,ie7,ie8 相容性寫法,CSS hack寫法
margin-bottom:40px; /*ff的屬性*/ margin-bottom:140px\9; /* IE6/7/8的屬性 */ color:red\0; /* IE8支援 */ *margin-bottom:450px; /*IE6/7的屬性*/ +margin-bottom:450px; _color:#ff0000; /* 只ie6支援 */ #1 { color: #333; } /* FF環境 */ * html #1 { color: #666; } /* IE6環境 */ *+html #1 { color: #999; } /* IE7環境 */
================================================================================
一、CSS hack寫法
書寫順序為FireFox在最前，其次是IE8、IE7，最後是IE6。
color:red;//所有瀏覽器
color:blue\9;//所有IE
+color:orange;//IE7
_color:green;//IE6
若瀏覽器為FireFox，
那麼color:red；若瀏覽器為IE8，根據CSS優先性原則，color:blue；若為IE7，color:orange；若為IE6，則color:green。
IE6識別 * 、_
IE7識別 * 、+
IE8識別 * 、\9,\0
只有IE8識別 \0/
ie9只識別：\9
FF什麼都不識別
.test{
color:#09F\0; /* IE8/9 */
color:#09F\0/; /* IE8 only */
}
.test{ color:#963\9; } /* IE9 only */
/*或者下面的，但是下面的優先順序小於上面的。Ps:老外的方法都是\0，根本沒考慮Opera*/
@media alland(min-width:0){ .test{color:red\9;}/* IE9 only */ }
<html>
<body>
<div style="border: 1px solid red; width: 300px; padding: 10px;">
在Firefox中，div的完整寬度是padding+width，因此width: 300px; padding: 10px;的實際寬度是320px;而在IE6中，div的完整寬度是width，所以
這個div和下面的div寬度一致。
</div>
<div style="border: 1px solid red; width: 300px;">
寬度為300px的div
</div>
<div style="border: 1px solid red; width: 280px !important; width: 300px; padding: 10px;">
通過藉助!important標記，可以設定Firefox中的width值為IE6中的width值減去padding值，這樣就實現了Firefox與IE6的padding效果尺寸相容。
</div>
</body>
< /html>
==================================================================================
DOCTYPE標準firfox與ie6 padding的問題
首先我們說說firefox和IE對CSS的寬度顯示有什麼不同：
其實CSS ’width’ 指的是標準CSS中所指的width的寬度，在firefox中的寬度就是這個寬度。它只包含容器中內容的寬度。而Internet Explorer ’width’
則是指整個容器的寬度，包括內容，padding ，border。
Firefox中：容器佔的寬度=內容寬度+padding寬度+border寬度
IE中：內容寬度=您定義的容器寬度(Internet Explorer ’width’)-padding寬度-border寬度
所以，如果IE中定義 width:120px;padding:5px 的話，所顯示的寬度就是120px.
即padding:5px是在width裡面。
而Firefox中，上面這個定義，顯示寬度就是 125 px;
所以，我們就必須這樣定義
width:115px !important;width:120px;padding:5px;
必須注意的是， !important; 一定要在前面。
除了在不同的瀏覽器上會有這個問題，還有可能是在編碼時引用了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
這個頭，他在ie瀏覽器下要支援w3標準，w3的padding和firfox標準相同，所以也會出現上面的情況
=====================================================================================
網站如何同時相容IE6、IE7、IE8
第一招：給常用CSS規定屬性值。
body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin:0;padding:0;}
img{border:0px;}
ul {margin:0px;padding:0px;}/
ul li {list-style:none;}
上面的建站常用程式碼就相是格式化CSS樣式，讓各瀏覽器按照我們設定的屬性值渲染網頁
第二招：IE和FF下物件居中問題
IE下大家應該知道只要設定body{text-align:center;}這樣就可以居中顯示。
但是這樣的方法在FF不行的。這裡就需要給修改成body:{text-align:center;margin:0px auto;}Margin的意思就是上下距離為0畫素，左右為自動。所以FF就會居
中顯示。
第三招：垂直居中（僅只用於一行）
比如說一個高30px的div，問題預設是會顯示在左上角，如果想垂直居中對其可以加個line-height:30px;樣式。如果你想讓他居下方則在修改line-height:30px;
數值越大越局下，為了防止撐破層，還需要再給一個樣式overflow:hidden;(超出的部分不顯示)
第四招：給每一個塊物件設定三個樣式
width:**px;height:**px;overflow:hidden;即便高、寬是屬性值是自動那麼也需要去設定這三個樣式。目的就是解決瀏覽器預設值的問題。
第五招：針對IE6、IE7、FF的css樣式(這一招在特殊情況下經常用到)
原來建設網站經常使用!important來設定優先權，但有了IE7之後就不行了。下面給大家個可以解決IE6、IE7、FF各個CSS優先權的方法
#1 { color: #333; } /* FF環境 */
* html #1 { color: #666; } /* IE6環境 */
*+html #1 { color: #999; } /* IE7環境 */
上面的書寫順序一定不能去改變。
這樣子網頁在FF下顯示#333，IE6下顯示#666，IE7下顯示#999