XHTML CSS 常見問題和解決方案

來自:http://www.cnblogs.com/leavingme/archive/2008/12/03/1347008.html
1、如何定義高度很小的容器？

在IE6下無法定義小高度的容器，是因為有一個預設的行高。
列舉2種解決方案：ovoverflow:hidden ¦ line-height:0

2、圖片下方出現幾像素的空白間隙？

這個也有多種解決方案，如將img定義為display:block,或定義父容器為font-size:0，個人更推薦使用vertical-align的方式，它的值可以是text-top ¦ text-bottom ¦ middle等

3、IE6雙倍margin的BUG?

display:inline

4、文本垂直方向對齊文本輸入框？

設定input為vertical-align:middle，textarea也是如此

5、為什麼在web標準下ie無法設定捲軸的顏色？

將設定捲軸顏色的樣式定義到html標籤選擇符上即可

6、如何讓層在falsh上顯示？

不可以，除了少數幾個層級很高的傢伙除外。
但可以將flash設定為透明，這時層就會透過falsh顯示，近似於覆蓋在flash之上了，如：
<param name="mode" value="transparent" />

7、如何使得文字不換行？

定義包含文字的容器為：width:xxx;white-space:nowrap;

8、ie中如何讓超出寬度的文字顯示為省略符號？

定義容器為：overoverflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;

9、如何在點文字時也選中checkbox?

<input id="test" type="checkbox" value="on" /> <label for="test">測試 </label>

10、一個div為margin-bottom:10px，一個div為margin-top:5px，為什麼2個div之間的間距是10px而不是15px?

這種情況瀏覽器會自動進行margin重疊，只顯示較大的margin值
解決方案：只設定其中一個div的margin為15px

11、如何解決ie下當li中出現2個或以上的浮動時，li之間產生的空白間隙？

設定li的vertical-align，值可以為top ¦ text-top ¦ middle ¦ bottom ¦ text-bottom

12、如何使得英文單詞不發生詞內斷行？

word-wrap:break-word;

13、為什麼被訪問過的連結顏色沒有變化？

定義連結的樣式時，需要按照:link,:visited,:hover,:active這樣的順序，可以使用LoVe HAte（喜歡討厭）來記憶

14、單行文本如何垂直置中？

height:xxx;line-height:xxx; 高和行高相同即可

15、已知高度的容器如何在頁面中水平垂直置中？

參閱：http://blog.doyoe.com/article.asp?id=74

16、未知尺寸的圖片圖如何水平垂直置中？

參閱：http://blog.doyoe.com/article.asp?id=159

17、標準模式和怪異模式下的盒模型區別？

標準模式下：實際寬度 = width + padding + border
怪異模式下：實際寬度 = width - padding - border

18、如何解決IE下的3像素BUG?

參閱：http://blog.doyoe.com/article.asp?id=68

19、如何做1像素細邊框的table?

方法1：設定table的border-collapse:collapse;
<style type="text/css">
table{border-collapse:collapse;border-color:#000;}
td{border-color:#000;}
</style>
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td>測試 </td>
<td>測試 </td>
</tr>
</table>

方法2：關鍵在於設定cellspacine="1"，用間隙來作為邊框
<style type="text/css">
table{background:#000;}
tr{background:#fff;}
</style>
<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;就同樣可以達到隱藏內容的目的，暫時還沒發現有什麼副作用，強烈推薦。

21、如何容器透明，內容不透明？

假設在標準模式下有如下結構：
<div class="outer">
<p class="inner">我不要透明 </p>
</div>

IE only的方法：在父容器outer被設定為透明後，只需要將子容器inner設定為position:relative; 如果需要相容其它瀏覽器，則以上的方法不適用，且結構也需改為：

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

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

22、如何去掉連結的虛線框？

IE下： <a href="#" onfocus="this.blur();"...>
FF下:a{outline:none;}

23、如何使得頁面字型行距始終保持n倍字型大小為基調？

在body內設定line-height:n即可，注，不可以為它加上單位
原因可參閱：http://blog.doyoe.com/article.asp?id=195

24、如何使用標準的方法插入flash?

<div class="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>

25、Standard Model如何讓容器可以height:100%？

設定html,body{height:100%;margin:0;}

26、如何使得表格的寬度固定?

設定table為table-layout:fixed;這時表格將使用固定式配置演算法，多出的內容將不影響表格的寬度

27、如何讓min-height相容ie6?

.min-height{min-height:100px;_height:100px;}
<div class="min-height">我是相容的min-height </div>

28、如何讓滑鼠變成手型且相容所有現代瀏覽器？

cursor:pointer

29、如何?ie6下的position:fixed?

參閱：http://blog.doyoe.com/article.asp?id=188

30、IE下如何對Standard Mode與Quirks Mode進行切換？

IE6以下的瀏覽器不用觸發，直接以Quirks Mode呈現頁面。

IE6和IE7都可以觸發的（在XHTML 的DTD申明前加上HTML注釋）：
<!--Let ie6 and ie7 into quirks mode-->
<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt-->

IE6的觸發（在XHTML 的DTD申明前加上XML申明）：
<!--l version="1.0" encoding="utf-8-->
<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt-->

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

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

<style type="text/css">
.a{color:#f00;}
.b{background:#eee;}
</style>

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

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

32、如何區別display:none與visibility:hidden?

相同的是display:none與visibility:hidden都可以用來隱藏某個元素；
不同的是display:none在隱藏元素的時候，將其佔位空間也去掉；而visibility:hidden只是隱藏了內容而已，其佔位空間仍然保留。