img div 間距設爲0，圖片和DIV間距的調整

一、如何定義高度很小的容器？
在IE6下沒法定義小高度的容器，是由於有一個默認的行高。
列舉2種解決方案：overflow:hidden | line-height:0

二、圖片下方出現幾像素的空白間隙？
這個也有多種解決方案，如將img定義爲display:block,或定義父容器爲font-size:0，我的更推薦使用vertical-align的方式，它的值能夠是text-top | text-bottom | middle等

三、IE6雙倍margin的BUG?
display:inline

四、文本垂直方向對齊文本輸入框？
設置input爲vertical-align:middle，textarea也是如此

五、爲何在web標準下ie沒法設置滾動條的顏色？
將設置滾動條顏色的樣式定義到html標籤選擇符上便可

六、如何讓層在falsh上顯示？
不能夠，除了少數幾個級別很高的傢伙除外。
但能夠將flash設置爲透明，這時層就會透過falsh顯示，近似於覆蓋在flash之上了，如：
<param name="mode" value="transparent" />

七、如何使得文字不換行？
定義包含文字的容器爲：width:xxx;white-space:nowrap;

八、ie中如何讓超出寬度的文字顯示爲省略號？
定義容器爲：overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;

九、如何在點文字時也選中checkbox?
測試

十、一個div爲margin-bottom:10px，一個div爲margin-top:5px，爲何2個div之間的間距是10px而不是15px?
這種狀況瀏覽器會自動進行margin重疊，只顯示較大的margin值
解決方案：只設置其中一個div的margin爲15px

十一、如何解決ie下當li中出現2個或以上的浮動時，li之間產生的空白間隙？
設置li的vertical-align，值能夠爲top | text-top | middle | bottom | text-bottom

十二、如何使得英文單詞不發生詞內斷行？
word-wrap:break-word;

1三、爲何被訪問過的連接顏色沒有變化？
定義連接的樣式時，須要按照:link,:visited,:hover,:active這樣的順序，可使用LoVe HAte（喜歡討厭）來記憶

1四、單行文本如何垂直居中？
height:xxx;line-height:xxx; 高和行高相同便可

1五、已知高度的容器如何在頁面中水平垂直居中？
參閱：

1六、未知尺寸的圖片圖如何水平垂直居中？
參閱：

1七、標準模式和怪異模式下的盒模型區別？
標準模式下：實際寬度 = width + padding + border
怪異模式下：實際寬度 = width - padding - border

1八、如何解決IE下的3像素BUG?
參閱：

1九、如何作1像素細邊框的table?
方法1：設置table的border-collapse:collapse;

    table
td

<table cellspacing="0" cellpadding="0" border="1">
    <tr>
        <td>測試 </td>
        <td>測試 </td>
    </tr>
</table>

方法2：關鍵在於設置cellspacine="1"，用間隙來做爲邊框

    table
tr

<table cellspacing="1" cellpadding="0" border="0">
    <tr>
        <td>測試 </td>
        <td>測試 </td>
    </tr>
</table>

20、以圖換字的幾種方法及優劣分析
以圖換字，實際上是爲了保證頁面的可讀性，這樣既有利於搜索引擎，又有利於結構查看。因爲這種方式被大多數人所認同，因此方法也愈來愈多：

方法1：使用text-indent的負值，將內容移出容器；
方法2：使用display:none，將內容隱藏；
方法3：使用padding將文字擠出容器以外，並將超出的部分hidden;
方法4：使用font設置超小字體，達到隱藏內容的目的。

方法1（很是不推薦）看起來蠻簡單，但其實有幾個不理想的地方，1是比較吃資源；2是在ie5下面會出現滯後背景沒法顯示；3是內容爲超連接時，長長的黑色虛框，讓你抓狂。
方法2（不推薦）其實倒也不復雜，只是須要多添加一個標籤，比較浪費；且display:none出現的概率太多，對seo也是會有些許影響的。
方法3（推薦）Standard Model下要2層標籤才能搞定，不過相對方法1和2仍是有優點的，推薦一下。
方法4（強烈推薦）只須要將字體設置爲0，而後overflow:hidden;如font:0/0 arial;overflow:hidden;就一樣能夠達到隱藏內容的目的，暫時還沒發現有什麼反作用，強烈推薦。

2一、如何容器透明，內容不透明？
假設在標準模式下有以下結構：
<div .="outer">
    <p .="inner">我不要透明 </p>
</div>

IE only的方法：在父容器outer被設置爲透明後，只須要將子容器inner設置爲position:relative; 若是須要兼容其它瀏覽器，則以上的方法不適用，且結構也需改成：

<div .="outer"> </div>
<div .="inner">我不要透明 </div>

而後使用position + z-index搞定位置

2二、如何去掉連接的虛線框？
IE下： <a href="#"...>
FF下:a

2三、如何使得頁面字體行距始終保持n倍字體大小爲基調？
在body內設置line-height:n便可，注，不能夠爲它加上單位
緣由可參閱：

2四、如何使用標準的方法插入flash?
<div .="fla-show">
    <object type="application/x-shockwave-flash" data="*.swf" width="*" height="*">
        <param name="movie" value="*.swf" />
        <img src="*.jpg" alt="用於不支持flash或屏蔽flash時顯示" />
    </object>
</div>

2五、Standard Model如何讓容器能夠height:100%？
設置html,body

2六、如何使得表格的寬度固定?
設置table爲table-layout:fixed;這時表格將使用固定佈局算法，多出的內容將不影響表格的寬度

2七、如何讓min-height兼容ie6?
.min-height
<div .="min-height">我是兼容的min-height </div>

2八、如何讓鼠標變成手型且兼容全部現代瀏覽器？
cursor:pointer

2九、如何實現ie6下的position:fixed?
參閱：

30、IE下如何對Standard Mode與Quirks Mode進行切換？
IE6如下的瀏覽器不用觸發，直接以Quirks Mode呈現頁面。

IE6和IE7均可以觸發的（在XHTML 的DTD申明前加上HTML註釋）：



IE6的觸發（在XHTML 的DTD申明前加上XML申明）：



當沒有使用DTD聲明或者使用HTML4如下（不包括HTML4）的DTD聲明時，基本全部的瀏覽器都是使用Quirks Mode呈現。

3一、如何給一個元素定義多個不一樣的css規則？

    .a
.b


<div .="a b">測試 </div>

如上例，該元素同時擁有a和b定義的樣式規則。
多個規則之間使用空格分開，而且只有class能同時使用多個規則，id不能夠

3二、如何區別display:none與visibility:hidden?
相同的是display:none與visibility:hidden均可以用來隱藏某個元素；
不一樣的是display:none在隱藏元素的時候，將其佔位空間也去掉；而visibility:hidden只是隱藏了內容而已，其佔位空間仍然保留

32.超連接訪問事後hover樣式就不出現的問題
被點擊訪問過的超連接樣式不在具備hover和active了,不少人應該都遇到過這個問題，解決方法是改變CSS屬性的排列順序: L-V-H-A

33.FF下如何使連續長字段自動換行
衆所周知IE中直接使用word-wrap:break-word 就能夠了, 這裏FF中咱們使用JS插入的方法來解決

34.ff下爲何父容器的高度不能自適應
爲何這個P撐不開DIV呢？解決的辦法是在div 與 p 之間插入<div .=」clear:both」></div>清除掉這個p的浮動.
什麼？你在IE下也碰到過相似問題

35. IE6的雙倍邊距BUG
浮動後原本外邊距10px,但IE解釋爲20px,解決辦法是加上display:inline

36. IE6下絕對定位的容器內文本沒法正常選擇的問題
上面的問題在IE六、7中存在，解決問題的辦法是讓IE進入到quirks mode。關於quirks mode的相關知識，請參考：
aoao:在IE6版本是6.0.2900.2180.xpsp_sp2.gdr.070227-2254好像依然存在問題，加了背景色依然無效。接着測試中…

37. IE6下爲何圖片下方有空隙產生
解決這個BUG的方法也有不少，能夠是改變html的排版，或者定義img 爲display:block
或者定義vertical-align屬性值爲vertical-align:top | bottom |middle |text-bottom
還能夠設置父容器的字體大小爲零，font-size:0

38. IE6下這兩個層中間怎麼有間隙
這個IE的3PX BUG也是常常出現的，解決的辦法是給.right也一樣浮動 float:left 或者相對IE6定義.left margin-right:-3px;

39. list-style-image沒法準肯定位的問題
這個list-style-image的定位問題也是常常有人問的，解決的辦法通常是用li的背景模擬，這裏採用相對定位的方法也能夠解決

40. LI中內容超過長度後以省略號顯示的方法
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}