下面介紹常見的CSS簡寫規則：
一、盒子大小
這里主要用于兩個屬性：margin和padding，我們以margin為例，padding與之相同。盒子有上下左右四個方向，每個方向都有個外邊距：
margin-top:1px; margin-right:2px; margin-bottom:3px; margin-left:4px;
你可以簡寫成：
margin:1px 2px 3px 4px;
語法 margin:top right bottom left;
//四個方向的邊距相同，等同于margin:1px 1px 1px 1px; margin:1px; //上下邊距都為1px，左右邊距均為2px，等同于margin:1px 2px 1px 2px; margin:1px 2px; //右邊距和左邊距相同，等同于margin:1px 2px 3px 2px; margin:1px 2px 3px; //注意，這里雖然上下邊距都為1px，但是這里不能縮寫。 margin:1px 2px 1px 3px;
二、邊框(border)
邊框的屬性如下：
border-width:1px; border-style:solid; border-color:#000;
可以縮寫為一句：
border:1px solid #000;
語法 border:width style color;
三、背景(Backgrounds)
背景的屬性如下：
background-color:#f00; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:00;
可以縮寫為一句：
background:#f00 url(background.gif) no-repeat fixed 0 0;
語法是background:color image repeat attachment position;
你可以省略其中一個或多個屬性值，如果省略，該屬性值將用瀏覽器默認值，默認值為：
-
color: transparent
-
image: none
-
repeat: repeat
-
attachment: scroll
-
position: 0% 0%
四、字體(fonts)
字體的屬性如下：
font-style:italic; font-variant:small-caps; font-weight:bold;font-size:1em; line-height:140%; font-family:"Lucida Grande",sans-serif;
可以縮寫為一句：
font:italic small-caps bold 1em/140%"Lucida Grande",sans-serif;
注意，如果你縮寫字體定義，至少要定義font-size和font-family兩個值。
五、列表(lists)
取消默認的圓點和序號可以這樣寫list-style:none;,
list的屬性如下:
list-style-type:square; list-style-position:inside; list-style-image:url(image.gif);
可以縮寫為一句：
list-style:square inside url(image.gif);
六、顏色(Color)
16進制的色彩值，如果每兩位的值相同，可以縮寫一半。例如：
Aqua: #00ffff ——#0ff
Black: #000000 ——#000
Blue: #0000ff ——#00f
Dark Grey: #666666 ——#666
Fuchsia:#ff00ff ——#f0f
Light Grey: #cccccc ——#ccc
Lime: #00ff00 ——#0f0
Orange: #ff6600 ——#f60
Red: #ff0000 ——#f00
White: #ffffff ——#fff
Yellow: #ffff00 ——#ff0
七、屬性值為0
書寫原則是如果CSS屬性值為0，那么你不必為其添加單位(如:px/em)，你可能會這樣寫:
padding:10px 5px 0px 0px;
試試這樣吧:
padding:10px 5px 00 ;
八、最后一個分號
最后一個屬性值后面分號可以不寫，如：
#nav{
border-top:4px solid #333;
font-style: normal;
font-variant:normal;
font-weight: normal;
}
可以簡寫成:
#nav{
border-top:4px solid #333;
font-style: normal;
font-variant:normal;
font-weight: normal
}
九、字體粗細(font-weight)
你可能會這樣寫:
h1{
font-weight:bold;
}
p{
font-weight:normal;
}
可以簡寫成:
h1{
font-weight:700;
}
p{
font-weight:400;
}
十、圓角半徑(border-radius)
border-radius是css3中新加入的屬性，用來實現圓角邊框。
-moz-border-radius-bottomleft:6px; -moz-border-radius-topleft:6px; -moz-border-radius-topright:6px; -webkit-border-bottom-left-radius:6px; -webkit-border-top-left-radius:6px; -webkit-border-top-right-radius:6px; border-bottom-left-radius:6px; border-top-left-radius:6px; border-top-right-radius:6px;
可以簡寫成:
-moz-border-radius:0 6px 6px; -webkit-border-radius:0 6px 6px; border-radius:0 6px 6px;
語法 border-radius:topleft topright bottomright bottomleft
]]> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
提示：您可以先修改部分代碼再運行，保存代碼功能在Firefox下無效。
在css中使用margin可以將margin-top，margin-right，margin-bottom，margin-left，縮寫為一個標記，順序為上右下左（順時針）。
margin標記可以帶一個、二個、三個、四個參數，各有不同的含義。
]]>
1. 檢查HTML元素是否有拼寫錯誤、是否忘記結束標記
即使是老手也經常會弄錯P的嵌套關系。可以用dreamweaver的驗證功能檢查一下有無錯誤。
2. 檢查CSS是否書寫正確
檢查一下有無拼寫錯誤、是否忘記結尾的 } 等。可以利用CleanCSS來檢查 CSS的拼寫錯誤。CleanCSS本是為CSS減肥的工具，但也能檢查出拼寫錯誤。
3. 用刪除法確定錯誤發生的位置
如果錯誤影響了整體布局，則可以逐個刪除P塊，直到刪除某個P塊后顯示恢復正常，即可確定錯誤發生的位置。
4. 利用border屬性確定出錯元素的布局特性
使用float屬性布局一不小心就會出錯。這時為元素添加border屬性確定元素邊界，錯誤原因即水落石出。
5. float元素的父元素不能指定clear屬性
MacIE下如果對float的元素的父元素使用clear屬性，周圍的float元素布局就會混亂。這是MacIE的著名的bug，倘若不知道就會走彎路。
6. float元素務必指定width屬性
很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內容如何，一定要為其指定width屬性。
另外指定元素時盡量使用em而不是px做單位。
7. float元素不能指定margin和padding等屬性
IE在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性（可以在float元素內部嵌套一個P來設置margin和padding）。也可以使用hack方法為IE指定特別的值。
8. float元素的寬度之和要小于100%
如果float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小于99%。
9. 是否重設了默認的樣式？
某些屬性如margin、padding等，不同瀏覽器會有不同的解釋。因此最好在開發前首先將全體的margin、padding設置為0、列表樣式設置為none等。
10. 是否忘記了寫DTD？
如果無論怎樣調整不同瀏覽器顯示結果還是不一樣，那么可以檢查一下頁面開頭是不是忘了寫下DTD聲明。
原文：all about floats
譯文：關于浮動的前世今生
版權所有，轉載請注明出處，多謝！！
什么是浮動？
浮動是 css 的定位屬性。我們可以看一下印刷設計來了解它的起源和作用。印刷布局中，文本可以按照需要圍繞圖片。一般把這種方式稱為“文本環繞”。
這是一個例子：
在排版軟件里面，存放文字的盒子可以被設置為允許圖文混排，或者無視它。無視圖文混排將會允許文字出現在圖片的上面，就像它甚至不會在那里一樣。這就是圖片是否是頁面流的一部分的區別。網頁設計與此非常類似。
在網頁設計中，應用了CSS的float屬性的頁面元素就像在印刷布局里面的被文字包圍的圖片一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對定位的頁面元素相比是一個明顯的不同。絕對定位的頁面元素被從網頁流里面移除了，就像印刷布局里面的文本框被設置為無視頁面環繞一樣。絕對定位的元素不會影響其它元素，其它元素也不會影響它，無論它是否和其它元素挨著。
像這樣在一個元素上用CSS設置浮動：
#sidebar { float: right; }
fload屬性有四個可用的值：Left 和Right 分別浮動元素到各自的方向，None (默認的) 使元素不浮動，Inherit 將會從父級元素獲取float值。
浮動的用處
除了簡單的在圖片周圍包圍文字，浮動可用于創建全部網頁布局。
浮動對小型的布局同樣有用。例如頁面中的這個小區域。如果我們在我們的小頭像圖片上使用浮動，當調整圖片大小的時候，盒子里面的文字也將自動調整位置：
同樣的布局可以通過在外容器使用相對定位，然后在頭像上使用絕對定位來實現。這種方式中，文本不會受頭像圖片大小的影響，不會隨頭像圖片的大小而有相應變化。
清除浮動
清除(clear)是浮動(float)的相關屬性.一個設置了清除浮動的元素不會如浮動所設置的一樣，向上移動到浮動元素的邊界，而是會忽視浮動向下移動。如下，一圖頂千言。
上例中，側欄向右浮動，并且短于主內容區域。頁腳(footer)于是按浮動所要求的向上跳到了可能的空間。要解決這個問題，可以在頁腳(footer)上清除浮動，以使頁腳(footer)待在浮動元素的下面。
#footer { clear: both; }
清除(clear)也有4個可能值。最常用的是 both，清楚左右兩邊的浮動。left 和 right 只能清楚一個方向的浮動。none 是默認值，只在需要移除已指定的清除值時用到。inherit 應該時第五個值，不過很奇怪的是 IE 不支持(這個不奇怪吧，IE 從來都這么特立獨行吧 －糖伴西紅柿注)。只清除左邊或右邊的浮動，實際中很少見，不過絕對有他們的用處。
]]>
CSS中最常用的布局類屬性，一個是Float(CSS浮動屬性Float詳解)，另一個就是CSS定位屬性Position。
1. position:static
所有元素的默認定位都是：position:static，這意味著元素沒有被定位，而且在文檔中出現在它應該在的位置。
一般來說，不用指定 position:static，除非想要覆蓋之前設置的定位。
#div-1 {
position:static;
}
2. position:relative
如果設定 position:relative，就可以使用 top,bottom,left 和 right 來相對于元素在文檔中應該出現的位置來移動這個元素。【意思是元素實際上依然占據文檔中的原有位置，只是視覺上相對于它在文檔中的原有位置移動了】
#div-1 {
position:relative;
top:20px;
left:-40px;
}
3. position:absolute
當指定 position:absolute 時，元素就脫離了文檔【即在文檔中已經不占據位置了】，可以準確的按照設置的 top,bottom,left 和 right 來定位了。
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
4. position:relative + position:absolute
如果我們給 div-1 設置 relative 定位，那么 div-1 內的所有元素都會相對 div-1 定位。如果給 div-1a 設置 absolute 定位，就可以把 div-1a 移動到 div-1 的右上方。
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
5. 兩欄絕對定位
現在就可以使用相對定位和絕對定位來做一個兩欄布局了。
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
6. 兩欄絕對定位定高
一種方案是給元素設定固定高度。但這種方案對大多數設計來說不太適合，因為一般我們不知道元素中會有多少文本，或者將要使用的精確的字號。
#div-1 {
position:relative;
height:250px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
7. 浮動
對于可變高度的列來說，絕對定位就不起作用了，以下是另外一個方案。
我們可以浮動一個元素，使它移動到左邊/右邊，并且是文本環繞著它。這主要用于圖像，但這里我們把它用于一個復雜的布局任務(因為這是我們唯一的工具)。
#div-1a {
float:left;
width:200px;
}
8. 浮動列
如果我們把一個元素向左浮動，并且把第二個元素也向左浮動，they will push up against each other。
#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}
9. 清除浮動列
在浮動元素之后，我們可以清除浮動來使其他元素正確定位。
#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}
概要：
本文主要描述XHTML中相對定位和絕對定位各自的本質、用法、區別和兩者之間的關系。以及使用CSS的Left、Right、Top、Bottom屬性（偏移屬性）和Margin屬性（外邊距）對定位塊級元素進行布局的方法。(本文的示例，請看這個附件demo。)
說明：
占位空間：元素在文檔流中所占據的空間。
物理空間：元素本身所占據的空間。
下面分3種情況分別對相對定位和絕對定位進行討論：
1.只使用css第一組屬性布局定位元素的情況
2.只使用css第二組屬性布局定位元素的情況
3.混合使用第一組和第二組屬性的情況
圖1為未定位時的初始效果，
層級關系為：
<div
<div box1
<div box2
<div box3
效果圖：
圖1
一、用相對定位布局塊級元素
元素設置position值： position:relative
此屬性值的設置，元素沒有脫離文檔流，還是普通流定位模型的一部分，會對文檔流中其它元素布局產生影響。（說明：藍色代表占位空間，紅色代表元素）
1.僅使用left、right、top和bottom屬性布局相對定位元素的情況
元素原本所占的占位空間仍保留，物理空間偏移。
圖2中，設置元素的left和top的值，對box2進行布局，可以發現除了box2偏移之外，其他塊級元素的位置沒有被影響，可見box2的占位空間還是存在的。
層級關系為：
<div
<div box1
<div box2 ――? position:relative ; top:-60px; left:80px;
<div box3
效果圖：
圖2
2.僅使用margin屬性布局相對定位元素的情況
用margin-bottom屬性和margin-top屬性設置負值可以改變文檔流中所占空間的高度，會影響文檔流中的其它元素位置。例如：margin-top:負值; margin-bottom:負值
圖3中，box1和box2都設置了元素margin-bottom的值，值等于它們高度的負值。box1和box2物理空間沒有改變，占位空間高度為0。box3的margin-bottom值設置為0，物理空間沒有改變，占位空間高度不變。再通過margin-left對box2和box3設置左偏移值。
層級關系為：
<div
<div box1 ――? position:relative ; margin-bottom:-102px;
<div box2 ――? position:relative ; margin-bottom:-102px; margin-left:110px;
<div box3 ――? position:relative ; margin-bottom:0px; margin-left:220px;
效果圖：
圖3
3.混合使用left、right、top和bottom屬性與margin屬性布局相對定位元素的情況
此情況，它們的值會產生累加的效果。在CSS2.1中所有的瀏覽器都使用外邊距邊界來完成 偏移計算。本文從數學的角度理解為偏移屬性值和外邊距屬性值累加。
圖4中，box2是在圖3的基礎上增加設置left的值產生的效果，可見margin-left的值和left的值產生了累加。(偏移量:80px = 110px – 30px)
層級關系為：
<div
<div box1 ――- position:relative ; margin-bottom:-102px;
<div box2 ――- position:relative ; margin-bottom:-102px;margin-left:110px; flet:-30px;
<div box3 ――- position:relative ; margin-bottom:0px; margin-left:220px;
效果圖：
圖4
二、用絕對定位布局塊級元素
設置position值：position:absolute;
此屬性值的設置，元素從文檔流完全刪除。
1.僅使用left、right、top和bottom屬性布局絕對定位元素的情況
絕對定位的元素的偏移位置以最近的定位(包括相對定位和絕對定位)祖先元素作參照物。如果元素沒有已定位(包括相對定位和絕對定位)的祖先元素，那么它的參照物為最頂級元素（由于瀏覽器的默認參照物不同，物可能是BODY或 HTML 元素）。
注意：IE下參照物需設置寬度或高度bottom和right屬性才可以正確的定位。
設置元素為絕對定位元素后，元素的Left、 Right、Top和Bottom屬性默認值不是0，只是將元素脫離文檔流。以下例子說明這個問題。
在圖5中，將橘黃色的祖先元素設置為定位元素（即參照物），box2設為絕對定位，文檔流由box1-box2-box3變為box1-box3，可box2卻沒有移動到距離參照物0值的位置上，可見box2的Left、 Right、Top和Bottom屬性默認值不等于0，它只是脫離了文檔流而已。
層級關系為：
<div ―――――――――――position:relative 參照物
<div―――――――――-沒有設置為定位元素，不是參照物
<div―――――――-沒有設置為定位元素，不是參照物
<div box1
<div box2 ――?absolute
<div box3
效果圖：
圖5
以最近的祖先定位元素為參照物的情況
圖6中，Box2設置成絕對定位元素，脫離了文檔流，文檔流由box1-box2-box3變為box1-box3，box2以最近的定位祖先（藍色框）為參照物。
層級關系為：
<div ――――――――――― position:relative; 不是最近的祖先定位元素，不是參照物
<div―――――――――-沒有設置為定位元素，不是參照物
<div―――――――- position:relative 參照物
<div box1
<div box2 ――?position:absolute; top:50px; left:120px;
<div box3
效果圖：
圖6
圖7中，為改變參照物（橘色框）后的效果
層級關系為：
<div ――――――――――― position:relative;最近的祖先定位元素，參照物
<div―――――――――-沒有設置為定位元素，不是參照物
<div―――――――-沒有設置為定位元素，不是參照物
<div box1
<div box2 ――?position:absolute; top:50px; left:120px;
<div box3
效果圖：
圖7
圖8中，參照物為最頂級的元素情況。
層級關系為：
<div ―――――――――――沒有設置為定位元素，不是參照物
<div―――――――――-沒有設置為定位元素，不是參照物
<div―――――――-沒有設置為定位元素，不是參照物
<div box1
<div box2 ――?position:absolute; top:50px; left:120px;
<div box3
效果圖：
圖8
2.僅使用margin屬性布局絕對定位元素的情況
此情況，margin-bottom 和margin-right的值不再對文檔流中的元素產生影響，因為該元素已經脫離了文檔流。另外，不管它的祖先元素有沒有定位，都是以文檔流中原來所在的位置上偏移參照物。
圖9中，使用margin屬性布局相對定位元素。
層級關系為：
<div ――――――――――― position:relative; 不是參照物
<div―――――――――-沒有設置為定位元素，不是參照物
<div―――――――-沒有設置為定位元素，不是參照物
<div box1
<div box2 ――?position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果圖：
圖9
IE6的情況下，box2前面沒有兄弟節點，則margin-left的值會出現雙倍邊距，見圖10。
層級關系為：
<div ――――――――――― position:relative; 不是參照物
<div―――――――――-沒有設置為定位元素，不是參照物
<div―――――――-沒有設置為定位元素，不是參照物
<div box1
<div box2 ――?position:absolute; margin-top:50px; margin-left:60px;
<div box3
效果圖：
圖10
3.混合使用left、right、top和bottom屬性與margin屬性布局相對定位元素的情況
a.margin屬性和top、bottom、left、right屬性同時使用，如果同一方向偏移，它們的值會產生累加的效果，見圖11。
例如：margin-left:120px; left:-20px; 那么box2的偏移值為120px-20px=100px;
層級關系為：
<div ―――――――――――-不是參照物
<div―――――――――?不是參照物
<div―――――――?position:relative; 參照物
<div box1
<div box2 ―――position:absolute; margin-left:120px; left:-20px; top:50px;
<div box3
效果圖：
圖11
b.絕對定位和相對定位的累加加效果不同，如果top、bottom、left、right屬性和margin屬性偏移的方向相反，top、bottom、left、right屬性值有效，反方向的margin屬性值無效，見圖12。
層級關系為：
<div ―――――――――――-不是參照物
<div―――――――――?不是參照物
<div―――――――?position:relative; 參照物
<div box1
<div box2 ―――position:absolute; margin-left:120px; right:10px; top:50px;
<div box3
效果圖：
圖12
總結：
- 相對定位的元素不會脫離文檔流，占用文檔流的空間，Left; Right; Top和Bottom屬性與margin屬性混合使用會產生累加效果。
- 絕對定位的元素脫離文檔流，偏移不影響文檔流中的其它元素，Left; Right; Top和Bottom屬性與margin屬性混合使用，偏移方向相同值累加，方向相反，margin屬性值無效。
- 絕對定位的元素以最近的定位祖先元素為參照物。
<div id=”header”></div>
<div id=”center”></div>
<div id=”footer”></div>
<div id=”header”>
<div id=”title”>這里是網站的標題</div>
<div id=”nav”>這里是網站導航欄</div>
</div>
那如何才是最優化，最科學的寫法呢？
我們選用其他的Xhtml代碼來取代上面的div，那又如何選擇呢？？
首先標題的選擇――我們知道在xhtml中h1-h6是表示標題的，而header里的標題在全頁來看是最重要的，我們選擇h1來表示標題是順其自然的。
其次導航欄的選擇――導航欄是由多個小塊內容組成，我們選擇無序列表
<ul><li></li></ul>
來表示菜單最合適不過了！最后以上的內容可以優化成：
<div id=”header”>
<h1>這里是網站的標題</h1>
<ul>
<li>這里是網站導航欄</li>
</ul>
</div>
一直也搞不清楚px與em之間的關系和特點，看過95%的中國網站需要重寫CSS以后后確實收獲很大。平時都是用px來定義字體，所以無法用瀏覽器字體放大的功能，而國外大多數網站都可以在IE下使用。因為
1. IE無法調整那些使用px作為單位的字體大小；
2. 國外的大部分網站能夠調整的原因在于其使用了em作為字體單位；
3. Firefox能夠調整px和em，但是96%以上的中國網民使用IE瀏覽器(或內核)。
px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。(引自CSS2.0手冊)
em是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。(引自CSS2.0手冊)
任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變為16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。
em有如下特點：
1. em的值并不是固定的；
2. em會繼承父級元素的字體大小。
所以我們在寫CSS的時候，需要注意兩點：
1. body選擇器中聲明Font-size=62.5%；
2. 將你的原來的px數值除以10，然后換上em作為單位；
3. 重新計算那些被放大的字體的em數值。避免字體大小的重復聲明。
也就是避免1.2 * 1.2= 1.44的現象。比如說你在#content中聲明了字體大小為1.2em，那么在聲明p的字體大小時就只能是1em，而不是1.2em, 因為此em非彼em，它因繼承#content的字體高而變為了1em=12px。
但是12px漢字例外，就是由以上方法得到的12px(1.2em)大小的漢字在IE中并不等于直接用12px定義的字體大小，而是稍大一點。這個問題Jorux已經解決，只需在body選擇器中把62.5%換成63%就能正常顯示了。原因可能是IE處理漢字時，對于浮點的取值精確度有限。不知道有沒有其他的解釋。
]]>實現鼠標經過背景變色的方法有很多，今天我們介紹的是用CSS+DIV實現的方法。
方法一
| 以下為引用的內容： #div:hover{background:#000000;} |
解釋:鼠標經過id為div的元素時背景變色
IE6.0、Firefox2.0、Opera 9.23都不行
方法二
| 以下為引用的內容： <div onmouseover=”this.style.backgroundColor=’#F4F9FD'” onmouseout=”this.style.backgroundColor=’#FFFFFF'”></div> |
方法三:
| 以下為引用的內容： <style> <div class=”d_out” onmouseover=”this.className=’d_over'” onmouseout=”this.className=’d_out'”>哈哈哈哈哈</div> |
<a>的標簽是可以，可是，這樣子會導致其它帶有<a>標簽的也跟著變色。
一般<a>是用來定義鏈接的樣式的，并不是定義某個區域的。現在常用的div+css的網頁用，div就是表示區域的意思，還是喜歡用這種，當然用table的話，會有更簡單的方法。
]]>1.DOCTYPE 影響 CSS 處理
2.FF: div 設置 margin-left, margin-right 為 auto 時已經居中, IE 不行
3.FF: body 設置 text-align 時, div 需要設置 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 設置 padding 后, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width
5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設置樣式
6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內容不要換行
7.cursor: pointer 可以同時在 IE FF 中顯示游標手指狀， hand 僅 IE 可以
8.FF: 鏈接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格。
9.在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法： div{margin:30px!important;margin:28px;}注意這兩個margin的順序一定不能寫反，據阿捷的說法! important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣： div{maring:30px;margin:28px}重復定義的話按照最后一個來執行，所以不可以只寫margin:XXpx! important;
11.ul標簽在Mozilla中默認是有padding值的,而在IE中只有margin有值所以先定義 ul{margin:0;padding:0;}就能解決大部分問題
注意事項：
1、float的div一定要閉合。
例如：(其中floatA、floatB的屬性已經設置為float:left;) <#div id=”floatA” ></#div>
<#div id=”floatB” ></#div>
<#div id=”NOTfloatC” ></#div>這里的NOTfloatC并不希望繼續平移，而是希望往下排。
這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標簽，必須將float標簽閉合。
在 <#div class=”floatB”></#div>
<#div class=”NOTfloatC”></#div>之間加上 <#div class=”clear”></#div>這個div一定要注意聲明位置，一定要放在最恰當的地方，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關系，否則會產生異常。
并且將clear這種樣式定義為為如下即可： .clear{
clear:both;}此外，為了讓高度能自動適應，要在wrapper里面加上overflow:hidden;
當包含float的box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性，用zoom:1;可以做到，這樣就達到了兼容。
例如某一個wrapper如下定義： .colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
2、margin加倍的問題
設置為float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。
解決方案是在這個div里面加上display:inline;
例如：
<#div id=”imfloat”></#div>
相應的css為
#IamFloat{
float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/}
3、關于容器的包涵關系
很多時候，尤其是容器內有平行布局，例如兩、三個float的div時，寬度很容易出現問題。在IE中，外層的寬度會被內層更寬的div擠破。一定要用Photoshop或者Firework量取像素級的精度。
4、關于高度的問題
如果是動態地添加內容，高度最好不要定義。瀏覽器可以自動伸縮，然而如果是靜態的內容，高度最好定好。（似乎有時候不會自動往下撐開，不知道具體怎么回事）
5、最狠的手段 – !important;
如果實在沒有辦法解決一些細節問題,可以用這個方法.FF對于”!important”會自動優先解析,然而IE則會忽略.如下 .tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}值得注意的是，一定要將xxxx !important 這句放置在另一句之上，上面已經提過
IE7.0出來了，對CSS的支持又有新問題。瀏覽器多了，網頁兼容性更差了，疲于奔命的還是我們 ，為解決IE7.0的兼容問題，找來了下面這篇文章：
現在我大部分都是用!important來hack，對于ie6和firefox測試可以正常顯示，但是ie7對!important可以正確解釋，會導致頁面沒按要求顯示！搜索了一下，找到一個針對IE7不錯的hack方式就是使用“*+html”，現在用IE7瀏覽一下，應該沒有問題了。
現在寫一個CSS可以這樣：
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
那么在firefox下字體顏色顯示為#333，IE6下字體顏色顯示為#666，IE7下字體顏色顯示為#999
]]>