下面介紹常見的CSS簡寫規(guī)則：

一、盒子大小

這里主要用于兩個屬性：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中新加入的屬性，用來實現(xiàn)圓角邊框。

-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 全部選擇 提示：你可先修改部分代碼，再按運行]

在css中使用margin可以將margin-top，margin-right，margin-bottom，margin-left，縮寫為一個標記，順序為上右下左（順時針）。

margin標記可以帶一個、二個、三個、四個參數(shù)，各有不同的含義。

　　1. 檢查HTML元素是否有拼寫錯誤、是否忘記結束標記
　　即使是老手也經(jīng)常會弄錯P的嵌套關系。可以用dreamweaver的驗證功能檢查一下有無錯誤。

　　2. 檢查CSS是否書寫正確
　　檢查一下有無拼寫錯誤、是否忘記結尾的 } 等。可以利用CleanCSS來檢查 CSS的拼寫錯誤。CleanCSS本是為CSS減肥的工具，但也能檢查出拼寫錯誤。

　　3. 用刪除法確定錯誤發(fā)生的位置
　　如果錯誤影響了整體布局，則可以逐個刪除P塊，直到刪除某個P塊后顯示恢復正常，即可確定錯誤發(fā)生的位置。

　　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等，不同瀏覽器會有不同的解釋。因此最好在開發(fā)前首先將全體的margin、padding設置為0、列表樣式設置為none等。

　　10. 是否忘記了寫DTD？
　　如果無論怎樣調整不同瀏覽器顯示結果還是不一樣，那么可以檢查一下頁面開頭是不是忘了寫下DTD聲明。

原文：all about floats
譯文：關于浮動的前世今生
版權所有，轉載請注明出處，多謝！！

什么是浮動？

浮動是 css 的定位屬性。我們可以看一下印刷設計來了解它的起源和作用。印刷布局中，文本可以按照需要圍繞圖片。一般把這種方式稱為“文本環(huán)繞”。
這是一個例子：

在排版軟件里面，存放文字的盒子可以被設置為允許圖文混排，或者無視它。無視圖文混排將會允許文字出現(xiàn)在圖片的上面，就像它甚至不會在那里一樣。這就是圖片是否是頁面流的一部分的區(qū)別。網(wǎng)頁設計與此非常類似。

在網(wǎng)頁設計中，應用了CSS的float屬性的頁面元素就像在印刷布局里面的被文字包圍的圖片一樣。浮動的元素仍然是網(wǎng)頁流的一部分。這與使用絕對定位的頁面元素相比是一個明顯的不同。絕對定位的頁面元素被從網(wǎng)頁流里面移除了，就像印刷布局里面的文本框被設置為無視頁面環(huán)繞一樣。絕對定位的元素不會影響其它元素，其它元素也不會影響它，無論它是否和其它元素挨著。

像這樣在一個元素上用CSS設置浮動：

#sidebar { float: right; }

fload屬性有四個可用的值：Left 和Right 分別浮動元素到各自的方向，None (默認的) 使元素不浮動，Inherit 將會從父級元素獲取float值。

浮動的用處

除了簡單的在圖片周圍包圍文字，浮動可用于創(chuàng)建全部網(wǎng)頁布局。

浮動對小型的布局同樣有用。例如頁面中的這個小區(qū)域。如果我們在我們的小頭像圖片上使用浮動，當調整圖片大小的時候，盒子里面的文字也將自動調整位置：

同樣的布局可以通過在外容器使用相對定位，然后在頭像上使用絕對定位來實現(xiàn)。這種方式中，文本不會受頭像圖片大小的影響，不會隨頭像圖片的大小而有相應變化。

清除浮動

清除(clear)是浮動(float)的相關屬性.一個設置了清除浮動的元素不會如浮動所設置的一樣，向上移動到浮動元素的邊界，而是會忽視浮動向下移動。如下，一圖頂千言。

上例中，側欄向右浮動，并且短于主內容區(qū)域。頁腳(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，這意味著元素沒有被定位，而且在文檔中出現(xiàn)在它應該在的位置。

一般來說，不用指定 position:static，除非想要覆蓋之前設置的定位。

#div-1 {
 position:static;
}

2. position:relative

如果設定 position:relative，就可以使用 top,bottom,left 和 right 來相對于元素在文檔中應該出現(xiàn)的位置來移動這個元素。【意思是元素實際上依然占據(jù)文檔中的原有位置，只是視覺上相對于它在文檔中的原有位置移動了】

#div-1 {
 position:relative;
 top:20px;
 left:-40px;
}

3. position:absolute

當指定 position:absolute 時，元素就脫離了文檔【即在文檔中已經(jīng)不占據(jù)位置了】，可以準確的按照設置的 top,bottom,left 和 right 來定位了。

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

概要：

本文主要描述XHTML中相對定位和絕對定位各自的本質、用法、區(qū)別和兩者之間的關系。以及使用CSS的Left、Right、Top、Bottom屬性（偏移屬性）和Margin屬性（外邊距）對定位塊級元素進行布局的方法。(本文的示例，請看這個附件demo。)

說明：

占位空間：元素在文檔流中所占據(jù)的空間。
物理空間：元素本身所占據(jù)的空間。

下面分3種情況分別對相對定位和絕對定位進行討論：
1.只使用css第一組屬性布局定位元素的情況
2.只使用css第二組屬性布局定位元素的情況
3.混合使用第一組和第二組屬性的情況

圖1為未定位時的初始效果，
層級關系為：
<div
  <div box1
  <div box2
  <div box3
效果圖：

圖1

一、用相對定位布局塊級元素
元素設置position值： position:relative
此屬性值的設置，元素沒有脫離文檔流，還是普通流定位模型的一部分，會對文檔流中其它元素布局產(chǎn)生影響。（說明：藍色代表占位空間，紅色代表元素）

1.僅使用left、right、top和bottom屬性布局相對定位元素的情況
元素原本所占的占位空間仍保留，物理空間偏移。

圖2中，設置元素的left和top的值，對box2進行布局，可以發(fā)現(xiàn)除了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屬性布局相對定位元素的情況
此情況，它們的值會產(chǎn)生累加的效果。在CSS2.1中所有的瀏覽器都使用外邊距邊界來完成 偏移計算。本文從數(shù)學的角度理解為偏移屬性值和外邊距屬性值累加。

圖4中，box2是在圖3的基礎上增加設置left的值產(chǎn)生的效果，可見margin-left的值和left的值產(chǎn)生了累加。(偏移量: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變?yōu)閎ox1-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變?yōu)閎ox1-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的值不再對文檔流中的元素產(chǎn)生影響，因為該元素已經(jīng)脫離了文檔流。另外，不管它的祖先元素有沒有定位，都是以文檔流中原來所在的位置上偏移參照物。

圖9中，使用margin屬性布局相對定位元素。
層級關系為：
<div ――――――――――― position:relative; 不是參照物
  <div―――――――――-沒有設置為定位元素，不是參照物
    <div―――――――-沒有設置為定位元素，不是參照物
      <div box1
      <div box2 ――?position:absolute; margin-top:50px; margin-left:120px;
      <div box3
效果圖：

圖9

IE6的情況下，box2前面沒有兄弟節(jié)點，則margin-left的值會出現(xiàn)雙倍邊距，見圖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屬性同時使用，如果同一方向偏移，它們的值會產(chǎn)生累加的效果，見圖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屬性混合使用會產(chǎn)生累加效果。
• 絕對定位的元素脫離文檔流，偏移不影響文檔流中的其它元素，Left; Right; Top和Bottom屬性與margin屬性混合使用，偏移方向相同值累加，方向相反，margin屬性值無效。
• 絕對定位的元素以最近的定位祖先元素為參照物。

<div id=”header”></div>
<div id=”center”></div>
<div id=”footer”></div>

<div id=”header”>
<div id=”title”>這里是網(wǎng)站的標題</div>
<div id=”nav”>這里是網(wǎng)站導航欄</div>
</div>

<ul><li></li></ul>

<div id=”header”>
<h1>這里是網(wǎng)站的標題</h1>
<ul>
<li>這里是網(wǎng)站導航欄</li>
</ul>
</div>

一直也搞不清楚px與em之間的關系和特點，看過95%的中國網(wǎng)站需要重寫CSS以后后確實收獲很大。平時都是用px來定義字體，所以無法用瀏覽器字體放大的功能，而國外大多數(shù)網(wǎng)站都可以在IE下使用。因為

1. IE無法調整那些使用px作為單位的字體大小；

2. 國外的大部分網(wǎng)站能夠調整的原因在于其使用了em作為字體單位；

3. Firefox能夠調整px和em，但是96%以上的中國網(wǎng)民使用IE瀏覽器(或內核)。

px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。(引自CSS2.0手冊)

em是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。(引自CSS2.0手冊)

任意瀏覽器的默認字體高都是16px。所有未經(jīng)調整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變?yōu)?6px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數(shù)值除以10，然后換上em作為單位就行了。

em有如下特點：

1. em的值并不是固定的；

2. em會繼承父級元素的字體大小。

所以我們在寫CSS的時候，需要注意兩點：

1. body選擇器中聲明Font-size=62.5%；

2. 將你的原來的px數(shù)值除以10，然后換上em作為單位；

3. 重新計算那些被放大的字體的em數(shù)值。避免字體大小的重復聲明。

也就是避免1.2 * 1.2= 1.44的現(xiàn)象。比如說你在#content中聲明了字體大小為1.2em，那么在聲明p的字體大小時就只能是1em，而不是1.2em, 因為此em非彼em，它因繼承#content的字體高而變?yōu)榱?em=12px。

但是12px漢字例外，就是由以上方法得到的12px(1.2em)大小的漢字在IE中并不等于直接用12px定義的字體大小，而是稍大一點。這個問題Jorux已經(jīng)解決，只需在body選擇器中把62.5%換成63%就能正常顯示了。原因可能是IE處理漢字時，對于浮點的取值精確度有限。不知道有沒有其他的解釋。

實現(xiàn)鼠標經(jīng)過背景變色的方法有很多，今天我們介紹的是用CSS+DIV實現(xiàn)的方法。

方法一

以下為引用的內容： #div:hover{background:#000000;}

解釋:鼠標經(jīng)過id為div的元素時背景變色

IE6.0、Firefox2.0、Opera 9.23都不行

方法二

以下為引用的內容： <div onmouseover=”this.style.backgroundColor=’#F4F9FD'” onmouseout=”this.style.backgroundColor=’#FFFFFF'”></div>

方法三:

以下為引用的內容： <style> .d_over{background-color:#307172;} .d_out{background-color:#EFEFEF;} </style> <div class=”d_out” onmouseover=”this.className=’d_over'” onmouseout=”this.className=’d_out'”>哈哈哈哈哈</div>

<a>的標簽是可以，可是，這樣子會導致其它帶有<a>標簽的也跟著變色。

一般<a>是用來定義鏈接的樣式的，并不是定義某個區(qū)域的。現(xiàn)在常用的div+css的網(wǎng)頁用，div就是表示區(qū)域的意思，還是喜歡用這種，當然用table的話，會有更簡單的方法。

1.DOCTYPE 影響 CSS 處理

2.FF: div 設置 margin-left, margin-right 為 auto 時已經(jīng)居中, 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的順序一定不能寫反，據(jù)阿捷的說法! important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣： div{maring:30px;margin:28px}重復定義的話按照最后一個來執(zhí)行，所以不可以只寫margin:XXpx! important;

11.ul標簽在Mozilla中默認是有padding值的,而在IE中只有margin有值所以先定義 ul{margin:0;padding:0;}就能解決大部分問題

注意事項：

1、float的div一定要閉合。

例如：(其中floatA、floatB的屬性已經(jīng)設置為float:left;) <#div id=”floatA” ></#div>

<#div id=”floatB” ></#div>

<#div id=”NOTfloatC” ></#div>這里的NOTfloatC并不希望繼續(xù)平移，而是希望往下排。

這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標簽，必須將float標簽閉合。

在 <#div class=”floatB”></#div>

<#div class=”NOTfloatC”></#div>之間加上 <#div class=”clear”></#div>這個div一定要注意聲明位置，一定要放在最恰當?shù)牡胤剑冶仨毰c兩個具有float屬性的div同級，之間不能存在嵌套關系，否則會產(chǎn)生異常。

并且將clear這種樣式定義為為如下即可： .clear{

clear:both;}此外，為了讓高度能自動適應，要在wrapper里面加上overflow:hidden;

當包含float的box的時候，高度自動適應在IE下無效，這時候應該觸發(fā)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時，寬度很容易出現(xiàn)問題。在IE中，外層的寬度會被內層更寬的div擠破。一定要用Photoshop或者Firework量取像素級的精度。

4、關于高度的問題

如果是動態(tài)地添加內容，高度最好不要定義。瀏覽器可以自動伸縮，然而如果是靜態(tài)的內容，高度最好定好。（似乎有時候不會自動往下?lián)伍_，不知道具體怎么回事）

5、最狠的手段 – !important;

如果實在沒有辦法解決一些細節(jié)問題,可以用這個方法.FF對于”!important”會自動優(yōu)先解析,然而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 這句放置在另一句之上，上面已經(jīng)提過

IE7.0出來了，對CSS的支持又有新問題。瀏覽器多了，網(wǎng)頁兼容性更差了，疲于奔命的還是我們 ，為解決IE7.0的兼容問題，找來了下面這篇文章：

現(xiàn)在我大部分都是用!important來hack，對于ie6和firefox測試可以正常顯示，但是ie7對!important可以正確解釋，會導致頁面沒按要求顯示！搜索了一下，找到一個針對IE7不錯的hack方式就是使用“*+html”，現(xiàn)在用IE7瀏覽一下，應該沒有問題了。

現(xiàn)在寫一個CSS可以這樣：

#example { color: #333; } /* Moz */

* html #example { color: #666; } /* IE6 */

*+html #example { color: #999; } /* IE7 */

那么在firefox下字體顏色顯示為#333，IE6下字體顏色顯示為#666，IE7下字體顏色顯示為#999