css 問題和經驗列表 http://www.phpstudy.net/css3/

CSS技巧和經驗列表（以下實例默認運行環境都爲Standard mode）：

如何清除圖片下方出現幾像素的空白間隙？
方法1：
```
img{display:block;}
```
方法2：
```
img{vertical-align:top;}
```
除了top值，還可以設置爲text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以
方法3：
```
#test{font-size:0;line-height:0;}
```
#test爲img的父元素
如何讓文本垂直對齊文本輸入框？
方法：
```
input{vertical-align:middle;}
```
如何讓單行文本在容器內垂直居中？
方法：
```
#test{height:25px;line-height:25px;}
```
只需設置文本的行高等於容器的高度即可
如何讓超鏈接訪問後和訪問前的顏色不同且訪問後仍保留hover和active效果？
方法：
```
a:link{color:#03c;}
a:visited{color:#666;}
a:hover{color:#f30;}
a:active{color:#c30;}
```
按L-V-H-A的順序設置超鏈接樣式即可，可速記爲LoVe（喜歡）HAte（討厭）

爲什麼Standard mode下IE無法設置滾動條的顏色？

方法：

html{
	scrollbar-3dlight-color:#999;
	scrollbar-darkshadow-color:#999;
	scrollbar-highlight-color:#fff;
	scrollbar-shadow-color:#eee;
	scrollbar-arrow-color:#000;
	scrollbar-face-color:#ddd;
	scrollbar-track-color:#eee;
	scrollbar-base-color:#ddd;
}

將原來設置在body上的滾動條顏色樣式定義到html標籤選擇符上即可

如何使文本溢出邊界不換行強制在一行內顯示？
方法：
```
#test{width:150px;white-space:nowrap;}
```
設置容器的寬度和white-space爲nowrap即可，其效果類似<nobr>標籤
如何使文本溢出邊界顯示爲省略號？
方法（此方法Firefox5.0尚不支持）：
```
#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
```
首先需設置將文本強制在一行內顯示，然後將溢出的文本通過overflow:hidden截斷，並以text-overflow:ellipsis方式將截斷的文本顯示爲省略號。
如何使連續的長字符串自動換行？
方法：
```
#test{width:150px;word-wrap:break-word;}
```
word-wrap的break-word值允許單詞內換行
如何清除浮動？
方法1：
```
#test{clear:both;}
```
#test爲浮動元素的下一個兄弟元素
方法2：
```
#test{display:block;zoom:1;overflow:hidden;}
```
#test爲浮動元素的父元素。zoom:1也可以替換爲固定的width或height
方法3：
```
#test{zoom:1;}
#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}
```
#test爲浮動元素的父元素
如何定義鼠標指針的光標形狀爲手型併兼容所有瀏覽器？
方法：
```
#test{cursor:pointer;}
```
若將cursor設置爲hand，將只有IE和Opera支持，且hand爲非標準屬性值
如何讓已知高度的容器在頁面中水平垂直居中？
方法：
```
#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}
```
Know More：已知高度的容器如何在頁面中水平垂直居中

如何讓未知尺寸的圖片在已知寬高的容器內水平垂直居中？

方法：

#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}
#test p{*position:absolute;*top:50%;*left:50%;margin:0;}
#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}

#test是img的祖父節點，p是img的父節點。Know More：未知尺寸的圖片如何水平垂直居中

如何設置span的寬度和高度（即如何設置內聯元素的寬高）？
方法：
```
span{display:block;width:200px;height:100px;}
```
要使內聯元素可以設置寬高，只需將其定義爲塊級或者內聯塊級元素即可。所以方法非常多樣，既可以設置display屬性，也可以設置float屬性，或者position屬性等等。
如何給一個元素定義多個不同的css規則？
方法：
```
.a{color:#f00;}
.b{background:#eee;}
.c{background:#ccc;}

<div class="a b">測試1</div>
<div class="a c">測試2</div>
```
多個規則之間使用空格分開，並且只有class能同時使用多個規則，id不可以

如何讓某個元素充滿整個頁面？

方法：

html,body{height:100%;margin:0;}
#test{height:100%;}

如何讓某個元素距離窗口上右下左4邊各10像素？

方法：

html,body{height:100%;margin:0;}
html{_padding:10px;}
#test{position:absolute;top:10px;right:10px;bottom:10px;left:10px;_position:static;_height:100%;}

如何去掉超鏈接的虛線框？
方法：
```
a{outline:none;}
```
IE7及更早瀏覽器由於不支持outline屬性，需要通過js的blur()方法來實現，如<a οnfοcus="this.blur();"...

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

方法1：

.outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}
.inner{width:200px;height:200px;margin-top:-200px;}
					
<div class="outer"><!--我是透明的容器--></div>
<div class="inner">我是不透明的內容</div>

原理是容器層與內容層並級，容器層設置透明度，內容層通過負margin或者position絕對定位等方式覆蓋到容器層上

方法2：

.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}
.outer .inner{position:relative\9;}
					
<div class="outer">
	<div class="inner">我是不透明的內容</div>
</div>

高級瀏覽器直接使用rgba顏色值實現；IE瀏覽器在定義容器透明的同時，讓子節點相對定位，也可達到效果

如何讓整個頁面水平居中？
方法：
```
body{text-align:center;}
#test2{width:960px;margin:0 auto;text-align:left;}
```
定義body的text-align值爲center將使得IE5.5也能實現居中
爲什麼容器的背景色沒顯示出來？爲什麼容器無法自適應內容高度？

方法：

清除浮動，方法請參考本頁第9條

通常出現這樣的情況都是由於沒有清除浮動而引起的，所以Debug時應第一時間想到是否有未清除浮動的地方

如何做1像素細邊框的table？

方法1：

#test{border-collapse:collapse;border:1px solid #ddd;}
#test th,#test td{border:1px solid #ddd;}

<table id="test">
	<tr><th>姓名</th><td>Joy Du</td></tr>
	<tr><th>年齡</th><td>26</td></tr>
</table>

方法2：

#test{border-spacing:1px;background:#ddd;}
#test tr{background:#fff;}

<table id="test" cellspacing="1">
	<tr><th>姓名</th><td>Joy Du</td></tr>
	<tr><th>年齡</th><td>26</td></tr>
</table>

IE7及更早瀏覽器不支持border-spacing屬性，但是可以通過table的標籤屬性cellspacing來替代。

如何使頁面文本行距始終保持爲n倍字體大小的基調？
方法：
```
body{line-height:n;}
```
注意，不要給n加單位。Know More：如何使頁面文本行距始終保持爲n倍字體大小的基調
標準模式Standard mode和怪異模式Quirks mode下的盒模型區別？
方法：
```
標準模式下：Element width = width + padding + border
怪異模式下：Element width = width
```
相關資料請參閱CSS3屬性box-sizing
以圖換字的幾種方法及優劣分析
思路1：使用text-indent的負值，將內容移出容器
```
.test1{width:200px;height:50px;text-indent:-9999px;background:#eee url(*.png) no-repeat;}

<div class="test">以圖換字之內容負縮進法</div>
```
該方法優點在於結構簡潔，不理想的地方：1.由於使用場景不同，負縮進的值可能會不一樣，不易抽象成公用樣式；2.當該元素爲鏈接時，在非IE下虛線框將變得不完整；3.如果該元素被定義爲內聯級或者內聯塊級，不同瀏覽器下會有較多的差異
思路2：使用display:none或visibility:hidden將內容隱藏；
```
.test{width:200px;height:50px;background:#eee url(*.png) no-repeat;}
.test span{visibility:hidden;/* 或者display:none */}

<div class="test"><span>以圖換字之內容隱藏法</span></div>
```
該方法優點在於兼容性強並且容易抽象成公用樣式，缺點在於結構較複雜
思路3：使用padding或者line-height將內容擠出容器之外；
```
.test{overflow:hidden;width:200px;height:0;padding-top:50px;background:#eee url(*.png) no-repeat;}
.test{overflow:hidden;width:200px;height:50px;line-height:50;background:#eee url(*.jpg) no-repeat;}

<div class="test">以圖換字之內容排擠法</div>
```
該方法優點在於結構簡潔，缺點在於：1.由於使用場景不同，padding或line-height的值可能會不一樣，不易抽象成公用樣式；2.要兼容IE5.5及更早瀏覽器還得hack
思路4：使用超小字體和文本全透明法；
```
.test{overflow:hidden;width:200px;height:50px;font-size:0;line-height:0;color:rgba(0,0,0,0);background:#eee url(*.png) no-repeat;}

<div class="test">以圖換字之超小字體+文本全透明法</div>
```
該方法結構簡單易用，推薦使用
爲什麼2個相鄰div的margin只有1個生效？
方法：
```
.box1{margin:10px 0;}
.box2{margin:20px 0;}

<div class="box1">box1</div>
<div class="box2">box2</div>
```
本例中box1的底部margin爲10px，box2的頂部margin爲20px，但表現在頁面上2者之間的間隔爲20px，而不是預想中的10+20px=30px，結果是選擇2者之間最大的那個margin，我們把這種機制稱之爲“外邊距合併”；外邊距合併不僅僅出現在相鄰的元素間，父子間同樣會出現。

簡單列舉幾點注意事項:
　外邊距合併只出現在塊級元素上；
　浮動元素不會和相鄰的元素產生外邊距合併；
　絕對定位元素不會和相鄰的元素產生外邊距合併；
　內聯塊級元素間不會產生外邊距合併；
　根元素間不會不會產生外邊距合併（如html與body間）；
　設置了屬性overflow且值不爲visible的塊級元素不會與它的子元素髮生外邊距合併；
如何在文本框中禁用中文輸入法？
方法：
```
input,textarea{ime-mode:disabled;}
```
ime-mode爲非標準屬性，寫該文檔時只有IE和Firefox支持
如何解決列表中list-style-image不能精準定位的問題？

方法：

不使用list-style-image來定義列表項目標記符號，而用background-image來代替，並通過background-position來進行定位
如何解決僞對象:before和:after在input標籤上的怪異表現的問題？

現象：

在編寫本條目時，除了Opera，在所有瀏覽器下input標籤使用僞對象:before和:after都沒有效果，即使Opera的表現也同樣令人詫異。大家可以試玩一下。瀏覽器版本：IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
如何解決僞對象:before和:after無法在Chrome,Safari,Opera上定義過渡和動畫的問題？

現象：

在編寫本條目時，除了Firefox，在所有瀏覽器下僞對象:before和:after無法定義過渡和動畫效果。瀏覽器版本：IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51。如果這個過渡或動畫效果是必須，可以考慮使用真實對象。

Bugs及解決方案列表（以下實例默認運行環境都爲Standard mode）：

如何在IE6及更早瀏覽器中定義小高度的容器？
方法：
```
#test{overflow:hidden;height:1px;font-size:0;line-height:0;}
```
IE6及更早瀏覽器之所以無法直接定義較小高度的容器是因爲默認會有行高
如何解決IE6及更早瀏覽器浮動時產生雙倍邊距的BUG？
方法：
```
#test{display:inline;}
```
當在IE6及更早瀏覽器中出現浮動後margin值解析爲雙倍的情況，設置該元素的display屬性爲inline即可。
如何在IE6及更早瀏覽器下模擬min-height效果？
方法：
```
#test{min-height:100px;_height:100px;}
```
注意此時#test不能再設置overflow的值爲hidden，否則模擬min-height效果將失效
如何解決按鈕在IE7及更早瀏覽器下隨着value增多兩邊留白也隨着增加的問題？
方法：
```
input,button{overflow:visible;}
```
如何解決IE7及更早瀏覽器下當li中出現2個或以上的浮動時，li之間產生的空白間隙的BUG？
方法：
```
li{vertical-align:top;}
```
除了top值，還可以設置爲text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以

如何解決IE6及更早瀏覽器下的3像素BUG？

方法：

.a{color:#f00;}
.main{width:950px;background:#eee;}
.content{float:left;width:750px;height:100px;background:#ccc;_margin-right:-3px;}
.aside{height:100px;background:#aaa;}

<div class="main">
	<div class="content">content</div>
	<div class="aside">aside</div>
</div>

在IE6及更早瀏覽器下爲.content設置margin-right:-3px；也可以設置.aside爲浮動

如何解決IE6下的文本溢出BUG（江湖匪號：“諜影重重”或“一隻豬的故事”）？
BUG重現：
```
.test{zoom:1;overflow:hidden;width:500px;}
.box1{float:left;width:100px;}
.box2{float:right;width:400px;}

<div class="test">
	<div class="box1"></div>
	
	<div class="box2">↓這就是多出來的那隻豬</div>
</div>
```
運行如上代碼，你會發現文字發生了溢出，在IE6下會多出一隻“豬”。造成此BUG的原因可能是多重混合的，如浮動，註釋，寬高定義等等。並且註釋條數越多，溢出的文本也會隨之增多。

列舉幾個解決方法：
　刪除box1和box2之間所有的註釋；
　不設置浮動；
　調整box1或box2的寬度，比如將box的寬度調整爲90px
如何解決IE6使用濾鏡PNG圖片透明後，容器內鏈接失效的問題？
方法：
```
div{width:300px;height:100px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='*.png');}
a{_position:relative;}
```
解決方法是爲容器內的鏈接定義相對定位屬性position的值爲relative
如何解決IE6無法識別僞對象:first-letter/:first-line的問題？
方法1：
```
p:first-letter {float:left;font-size:40px;font-weight:bold;}
p:first-line {color:#090;}
```
增加空格：在僞對象選擇符:first-letter/:first-line與包含規則的花括號"{"間增加空格。
方法2：
```
p:first-letter
{float:left;font-size:40px;font-weight:bold;}
p:first-line
{color:#090;}
```
換行：將整個花括號"{"規則區域換行。細節參見E:first-letter和E:first-line選擇符
如何解決IE8會忽略僞對象:first-letter/:first-line裏的!important規則的問題？
BUG重現：
```
p:first-letter {float:left;font-size:40px;font-weight:bold;color:#f00!important;color:#090;}
```
如上代碼，在IE8下color定義都會失效，原因就是因爲有color使用了!important規則。鑑於此，請儘量不要在:first-letter/:first-line裏使用!important規則。
如何解決IE6會忽略同一條樣式體內的!important規則的問題？
BUG重現：
```
div{color:#f00!important;color:#000;}
```
如上代碼，IE6及以下瀏覽器div的文本顏色爲#000，!important並沒有覆蓋後面的規則，也就是說!important被忽略了。解決方案是將該樣式拆分爲2條，細節參見!important規則

如何解決IE6及更早瀏覽器下當li內部元素是定義了display:block的內聯元素時底部產生空白的問題？

BUG重現：

a,span{display:block;background:#ddd;}

<ul>
	<li><a href="http://www.phpstudy.net/css3/">CSS參考手冊</a></li>
	<li><a href="http://blog.phpstudy.net/">CSS探索之旅</a></li>
	<li><a href="http://demo.phpstudy.net/">web前端實驗室</a></li>
	<li><span>測試li內部元素爲設置了display:block的內聯元素時底部產生空白</span></li>
</ul>

如上代碼，IE6及更早瀏覽器每個li內部的內聯元素底部都會產生空白。解決方案是給li內部的內聯元素再加上zoom:1

如何解決IE6及更早瀏覽器下未定義寬度的浮動或絕對定位元素會被內部設置了zoom:1的塊元素撐開的問題？

BUG重現：

#test{zoom:1;overflow:hidden;border:1px solid #ddd;background:#eee;}
#test h1{float:left;}
#test .nav{float:right;background:#aaa;}
#test .nav ul{zoom:1;overflow:hidden;margin:0;padding:0;list-style:none;}
#test .nav li{float:left;margin:0 5px;}

<div id="test">
	<h1>phpstudy</h1>
	<div class="nav">
		<ul>
			<li><a href="http://www.phpstudy.net/css3/">CSS參考手冊</a></li>
			<li><a href="http://blog.phpstudy.net/">CSS探索之旅</a></li>
			<li><a href="http://demo.phpstudy.net/">web前端實驗室</a></li>
		</ul>
	</div>
</div>

如上代碼，IE6及更早瀏覽器div.nav會被設置了zoom:1的ul給撐開。

列舉幾個解決方法：
　設置ul爲浮動元素；
　設置ul爲inline元素；
　設置ul的width

如何解決IE7及更早瀏覽器下子元素相對定位時父元素overflow屬性的auto|hidden失效的問題？

BUG重現：

div{overflow:auto;width:260px;height:80px;border:1px solid #ddd;}
p{position:relative;margin:0;}

<div>
	<p>如果我是相對定位，我的父元素overflow屬性設置爲auto|hidden將失效。如果你使用的是IE及更早瀏覽器，你將可以看到這個BUG</p>
	<p>如果我是相對定位，我的父元素overflow屬性設置爲auto|hidden將失效。如果你使用的是IE及更早瀏覽器，你將可以看到這個BUG</p>
</div>

如上代碼，在IE7及更早瀏覽器下你會看到div的滾動條將無法工作。解決方案是給div也設置相對定位position:relative

其它技巧和經驗列表（以下實例默認運行環境都爲Standard mode）：

如何讓層在falsh上顯示？
方法：
```
<param name="wmode" value="transparent" />
```
設置flash的wmode值爲transparent或opaque

如何使用標準的方法在頁面上插入flash？

方法：

<object id="flash-show" type="application/x-shockwave-flash" data="*.swf">
	<param name="movie" value="*.swf" />
	<param name="wmode" value="transparent" />
	<img src="*.jpg" alt="用於不支持flash或屏蔽flash時顯示" />
</object>

至於flash的寬高可以在css裏設置

如何在點文字時也選中複選框或單選框？

方法1：

<input type="checkbox" id="chk1" name="chk" /><label for="chk1">選項一</label>
<input type="checkbox" id="chk2" name="chk" /><label for="chk2">選項二</label>

<input type="radio" id="rad1" name="rad" /><label for="rad1">選項一</label>
<input type="radio" id="rad2" name="rad" /><label for="rad2">選項二</label>

該方式所有主流瀏覽器都支持

方法2：

<label><input type="checkbox" name="chk" />選項一</label>
<label><input type="checkbox" name="chk" />選項二</label>

<label><input type="radio" name="rad" />選項一</label>
<label><input type="radio" name="rad" />選項二</label>

該方式相比方法1更簡潔，但IE6及更早瀏覽器不支持

IE下如何對Standard Mode與Quirks Mode進行切換？
IE6的觸發（在DTD申明前加上XML申明）：
```
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
```
IE5.5及更早瀏覽器版本直接以Quirks Mode解析。
所有IE版本的觸發（在DTD申明前加上HTML註釋）：
```

<!DOCTYPE html>
```
當沒有DTD聲明時，所有IE版本也會進入Quirks Mode。
如何區別display:none與visibility:hidden？

方法：

相同的是display:none與visibility:hidden都可以用來隱藏某個元素；不同的是display:none在隱藏元素的時候，將其佔位空間也去掉；而visibility:hidden只是隱藏了內容而已，其佔位空間仍然保留。
如何設置IE下的iframe背景透明？

方法：

設置iframe元素的標籤屬性allowtransparency="allowtransparency"然後設置iframe內部頁面的body背景色爲transparent。不過由此會引發IE下一些其它問題，如：設置透明後的iframe將不能遮住select

http://wenku.baidu.com/view/fc617d26ccbff121dd3683cf.html

css 問題和經驗列表 http://www.phpstudy.net/css3/

CSS技巧和經驗列表（以下實例默認運行環境都爲Standard mode）：

如何清除圖片下方出現幾像素的空白間隙？

如何讓文本垂直對齊文本輸入框？

如何讓單行文本在容器內垂直居中？

如何讓超鏈接訪問後和訪問前的顏色不同且訪問後仍保留hover和active效果？

爲什麼Standard mode下IE無法設置滾動條的顏色？

如何使文本溢出邊界不換行強制在一行內顯示？

如何使文本溢出邊界顯示爲省略號？

如何使連續的長字符串自動換行？

如何清除浮動？

如何定義鼠標指針的光標形狀爲手型併兼容所有瀏覽器？

如何讓已知高度的容器在頁面中水平垂直居中？

如何讓未知尺寸的圖片在已知寬高的容器內水平垂直居中？

如何設置span的寬度和高度（即如何設置內聯元素的寬高）？

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

如何讓某個元素充滿整個頁面？

如何讓某個元素距離窗口上右下左4邊各10像素？

如何去掉超鏈接的虛線框？

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

如何讓整個頁面水平居中？

爲什麼容器的背景色沒顯示出來？爲什麼容器無法自適應內容高度？

如何做1像素細邊框的table？

如何使頁面文本行距始終保持爲n倍字體大小的基調？

標準模式Standard mode和怪異模式Quirks mode下的盒模型區別？

以圖換字的幾種方法及優劣分析

爲什麼2個相鄰div的margin只有1個生效？

如何在文本框中禁用中文輸入法？

如何解決列表中list-style-image不能精準定位的問題？

如何解決僞對象:before和:after在input標籤上的怪異表現的問題？

如何解決僞對象:before和:after無法在Chrome,Safari,Opera上定義過渡和動畫的問題？

Bugs及解決方案列表（以下實例默認運行環境都爲Standard mode）：

如何在IE6及更早瀏覽器中定義小高度的容器？

如何解決IE6及更早瀏覽器浮動時產生雙倍邊距的BUG？

如何在IE6及更早瀏覽器下模擬min-height效果？

如何解決按鈕在IE7及更早瀏覽器下隨着value增多兩邊留白也隨着增加的問題？

如何解決IE7及更早瀏覽器下當li中出現2個或以上的浮動時，li之間產生的空白間隙的BUG？

如何解決IE6及更早瀏覽器下的3像素BUG？

如何解決IE6下的文本溢出BUG（江湖匪號：“諜影重重”或“一隻豬的故事”）？

如何解決IE6使用濾鏡PNG圖片透明後，容器內鏈接失效的問題？

如何解決IE6無法識別僞對象:first-letter/:first-line的問題？

如何解決IE8會忽略僞對象:first-letter/:first-line裏的!important規則的問題？

如何解決IE6會忽略同一條樣式體內的!important規則的問題？

如何解決IE6及更早瀏覽器下當li內部元素是定義了display:block的內聯元素時底部產生空白的問題？

如何解決IE6及更早瀏覽器下未定義寬度的浮動或絕對定位元素會被內部設置了zoom:1的塊元素撐開的問題？

如何解決IE7及更早瀏覽器下子元素相對定位時父元素overflow屬性的auto|hidden失效的問題？

其它技巧和經驗列表（以下實例默認運行環境都爲Standard mode）：

如何讓層在falsh上顯示？

如何使用標準的方法在頁面上插入flash？

如何在點文字時也選中複選框或單選框？

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

如何區別display:none與visibility:hidden？

如何設置IE下的iframe背景透明？