1.常用代碼整理
1.1 水平居中
div {margin-left: auto; margin-right: auto; }
另外，如果你的 div還沒有指定寬度（可以是相對的大小），這種 CSS居中寫法也起不到應有的效果，解決辦法是爲這個 div指定一個width 寬度，例如： width:auto; 或者 width:50% 之類的。
同時，你的頁面類型即 document type必須聲明爲xhtml 。至於鬆散還是嚴格都不影響。
這個寫法也適用於圖片 img和一些其他的盒狀標籤的 CSS居中。
最後，假如你在 IE和FireFox 兩個瀏覽器中看起來不一樣，你最好採用 text-align:center; 和 margin 兩個 CSS居中一起設置的方法。例如：
#layout {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
說明：首先在父級元素定義 TEXT-ALIGN: center;這個的意思就是在父級元素內的內容居中；對於 IE這樣設定就已經可以了。但在 mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上 “MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在一個 DIV裏，你可以依次拆出多個 div，只要在每個拆出的div裏定義 MARGIN -RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
另外，如果你的 div還沒有指定寬度（可以是相對的大小），這種 CSS居中寫法也起不到應有的效果，解決辦法是爲這個 div指定一個width 寬度，例如： width:auto; 或者 width:50% 之類的。
同時，你的頁面類型即 document type必須聲明爲xhtml 。至於鬆散還是嚴格都不影響。
這個寫法也適用於圖片 img和一些其他的盒狀標籤的 CSS居中。
最後，假如你在 IE和FireFox 兩個瀏覽器中看起來不一樣，你最好採用 text-align:center; 和 margin 兩個 CSS居中一起設置的方法。例如：
#layout {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
說明：首先在父級元素定義 TEXT-ALIGN: center;這個的意思就是在父級元素內的內容居中；對於 IE這樣設定就已經可以了。但在 mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上 “MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在一個 DIV裏，你可以依次拆出多個 div，只要在每個拆出的div裏定義 MARGIN -RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
1.2垂直居中
一、單行內容的居中
只考慮單行是最簡單的，無論是否給容器固定高度，只要給容器設置 line-height和 height ，並使兩值相等，再加上 over-flow: hidden 就可以了
只考慮單行是最簡單的，無論是否給容器固定高度，只要給容器設置 line-height和 height ，並使兩值相等，再加上 over-flow: hidden 就可以了
.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}
height: 4em;
line-height: 4em;
overflow: hidden;
}
優點：
1. 同時支持塊級和內聯極元素
2. 支持所有瀏覽器
缺點：
1. 只能顯示一行
2. IE中不支持 <img>等的居中
要注意的是：
1. 使用相對高度定義你的 height 和 line-height
2. 不想毀了你的佈局的話， overflow: hidden 一定要
1. 同時支持塊級和內聯極元素
2. 支持所有瀏覽器
缺點：
1. 只能顯示一行
2. IE中不支持 <img>等的居中
要注意的是：
1. 使用相對高度定義你的 height 和 line-height
2. 不想毀了你的佈局的話， overflow: hidden 一定要
方法二 ：
使用絕對定位的 div，把它的 top 設置爲 50％， margin-top設置爲負的 content 高度。這意味着對象必須在 CSS 中指定固定的高度。
因爲有固定高度，或許你想給 content 指定 overflow:auto ，這樣如果 content 太多的話，就會出現滾動條，以免 content 溢出。
<div class="content">
Content goes here</div>
Content goes here</div>
#content {
position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* negative half of the height */
}
position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* negative half of the height */
}
優點 ：
適用於所有瀏覽器
不需要嵌套標籤
不需要嵌套標籤
缺點 ：
沒有足夠空間時， content 會消失( 類似div 在 body 內，當用戶縮小瀏覽器窗口，滾動條不出現的情況 )
2兼容性整理
2.1 chrome下font-size小於 12px無效
當樣式表裏 font-size小於12px 時，chrome瀏覽器裏字體顯示仍爲 12px
第一種（推薦）：
Css代碼
html{-webkit-text-size-adjust:none;}
Css代碼
html{-webkit-text-size-adjust:none;}
第二種：
在chrome瀏覽器工具欄 選項 > 高級選項 > 更改字體和語言設置 > 語言 > 谷歌瀏覽器語言 設置改爲 English
在chrome瀏覽器工具欄 選項 > 高級選項 > 更改字體和語言設置 > 語言 > 谷歌瀏覽器語言 設置改爲 English
2.2 IE6、7下 POSITION:RELATIVE不滾動
父容器設置overflow:auto;子元素設置屬性position:relative;在ie6、ie7中該子元素不隨滾動條滾動。
解決辦法：
給設置了overflow:auto屬性的父容器也加上position:relative。
2.3 IE6下float元素換行
當非 float的元素和float 的元素在一起的時候，如果非 float元素在先，那麼float的元素將被排斥
<div>我不float
<span class="right">我 float：right</span>
</div>
也就是說，你的 span是float:right ，但是你文本還是 float:none
<span class="right">我 float：right</span>
</div>
也就是說，你的 span是float:right ，但是你文本還是 float:none
如果要讓兩者佔據同一行，一般有兩個解決方法 :
第一種：把 span先於文本顯示；第二：把文本也設成 float。
2.4 z-index問題
當定位元素的 'z-index' 未設置時（默認爲 auto），在 IE6
IE7 IE8(Q) 下將會創建一個新的局部層疊上下文。而在其它瀏覽器下，則嚴格按照規範，不產生新的局部層疊上下文。
<style type="text/css">
body { margin:0; }
.p1{ top:20px; height:50px; width:150px; background-color:blue;}
.p2{ top:10px; left:20px; height:30px; width:100px; background-color:yellow;}
.p3{ top:0px; left:50px; height:100px; width:50px; background-color:red;}
</style>
<div style="position:relative;" class="p1">1
<div style="position:absolute; z-index:1;" class="p2">2</div>
</div>
<div style="position:absolute;" class="p3">3</div>
而在 IE6 IE7 E8(Q) 下，定位元素【 p1】和【p3 】都創建了新的局部層疊上下文，在同一根層疊上下文中，它們的層疊級別相同，但【 p3】在【p1 】之後，所以在 Z 軸上【p3 】比【p1】靠前顯示。此時，由於【 p2】處於【p1 】的層疊上下文中，所以【 p2】在 Z 軸上要比【 p3】靠後。
在IE6 下的層級高低不僅要看本身，還要看自己的父元素是否給力：父元素的 position 屬性爲 relative或absolute 時，子元素的 absolute 屬性是相對於父元素而言的。而在 IE6下的層級的表現有時候不是看子元素的 z-index 多高，而要看它們的父元素的 z-index 誰高誰低。
解決方法有三，1、 position:relative改爲position:absolute ；2、去除浮動； 3、浮動元素添加position屬性（如 relative，absolute 等）。
2.5 float問題
1. IE7 中，底邊距 bug是當浮動父元素有浮動子元素時，這些子元素的底邊距會被父元素忽略掉；
2. 3像素間距是指挨着浮動元素的文本會神奇的被踢出去 3像素，好像浮動元素的周圍有一個奇怪的力場一樣；
3. 雙倍邊距bug 處理 IE6 時，另一個需要記住的事情是，如果在和浮動方向相同的方向上設置外邊距 (margin)，會引發雙倍邊距。
2.6 haslayout引起的IE6 :hover失效
<style type="text/css">
a:hover { }
a:hover span{color:#F00;}
</style>
<body>
<a href="#"> 鼠標經過時改變我的 <span>顏色</span></a>
</body>
在IE6下“顏色”根本就不會變成紅色，其他瀏覽器都是好的，要解決這個問題就必須觸發 a:hover的layout ，例如a:hover
{ display:inline-block}或者 a:hover
{ zoom:1}等等。
2.7 inline-block元素間間距
使用 inline-block會使除IE6/7 外的瀏覽器的元素之間有 3或4px 的間隔。
解決辦法：
元素間留白間距出現的原因就是標籤段之間的空格，因此，去掉 HTML中的空格，自然間距就木有了。
2.8 IE6下百分比高度無效
解決：設置具體高度值
3 異步加載css執行優先級
IE8、9 下按照加載時間順序執行，其他瀏覽器則按 dom節點順序執行。