CSS常見問題小技巧解決辦法收集
一、常見問題
1、div標簽未關閉
這是書寫代碼是最為常見的一種錯誤了。特別是記事本書寫習慣的設計師，在未關閉的情況下記事本的不會提示你什么，如果是在DW中，未關閉DIV，開始的DIV會顯示灰色，即無效。
2、DOCTYPE聲明
不聲明DOCTYPE，或者在文件開始錯誤聲明DOCTYPE，也是一個常見錯誤。根據一般經驗，Strict DOCTYPE是大家追求的最高級驗證。Strict validation表明你的網頁能夠在所有瀏覽器上都得到最佳展示。
3、結尾斜線
結尾斜線也是造成頁面失效比較常見的原因。我們很容易忽略結尾斜線之類的東西，特別是在image標簽等元素中。在嚴格的DOCTYPE中這是無效的。要在img標簽結尾處加上“/”以解決此問題。
4、圖像alt屬性
你可能還沒有注意到，圖像也是高級驗證的潛在絆腳石。除了結尾斜線，高級驗證也要求用alt標簽來描述圖像，如alt="收藏生活，享受生活"。搜索引擎也靠alt標簽來識別網頁上的圖像，所以無論怎樣加上alt標簽總是好的。
5、未知實體數據
實體數據是又一個影響驗證的易犯錯誤。我們可以考慮用適當的編碼字符來代替“&”等符號。entire list中列出在XHTML版塊設計中可用的適當的編碼字符實體數據。
6、不良嵌套
嵌套就是元素里又包括元素，如下所示：
我們容易混淆嵌套元素的順序。例如在div標簽前啟動strong標簽，但又先關閉div標簽。這可能不會改變版塊布局，但卻會使你的版塊設計失效。
7、float元素的寬度之和要小于100%
如果float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小于99%。
-------------------------------------------------------------------------------------------
1，有關DIV居中的問題。
在body中如果設置DIV#box居中的話,用text-align:center；
效果是在IE6中可實現居中，且box中的文字也居中，而在FF中的表現是，文字居中，層box默認居左；為了改變這種差異一般用：
body{margin:auto;} box{margin:auto;}這樣在IE6和FF中都一樣；
2,float浮動元素。
float可定位DIV，而設置為float的DIV其margin值在IE下會加倍，FF中不會。這樣 如果設計者對多個浮動的DIV進行了margin設置（如#item1,#item2,#item3{float:left;margin- left:5px;}），則顯示結果在IE下與FF下會有很大差異。解決方案是在這個DIV中加入display:inline;如：
#item1,#item2,#item3
{float:left;
margin-left:5px; /*ie理解為10px*/
display:inline; /*ie再理解為5px*/
}
3,ul標簽
ul和uo在FF中默認的padding值不為0，在ie中默認的margin值不為0；因此在對UL進行操作之前先定義ul{margin:0; padding:0;}，之后對ul時行的設置，在兩種瀏覽器是表現一致的。
4，FF中BOX內容能自動伸到頁面底部的方法。
在IE中使用height:auto;可使高度隨內容增加，而在firefox中高度就成固定的，BOX里面的子層會溢出。
解決這個問題可以在BOX中加入一個隱藏的層：<div id="clearbox"></div>,這個層做為BOX的最后一個子層，高度自適應問題就可解決。
clearbox定義如下：
.clearbox{
border-top:1px solid transparent!important;
margin-top:-1px!important;
border-top:0;
margin-top:0;
clear:both;
visibility:hidden;
}
其作用就是解決浮動元素引起父元素無法獲得高度的問題。
5, 另外，設置 overflow:auto;也可以；
6,當文字和圖片在同一行出現時，如何才能使他們在垂直方向居中呢？
<div id="abc">文字一：<img src="../pic/btn.gif" /></div>
關鍵在于CSS中對圖片文件加上#abc img{vertical-align:middle;}的描述，就可以使它們的中心在同一水平線上了！
7, 一個設置了邊框的容量，如#BOXa{border:#ccc solid 1px;}，它里面有浮動元素，拖動滾動條時，在IE6,7中有時會出現邊框斷線的情況（FF中不會），這時的解決辦法是在#BOXa中加一個屬 性：background:#fff;一般可以解決；
8,僅IE7可以識別
*+html select {…!important;}
=================================
你知道#box div{...}這樣寫的含義嗎？
是指，文檔中，以box為ID的元素下邊的所有標簽名為div的元素！也就是說，它并不是來給box賦樣式，而是給box下的那兩個div賦樣式！（讓它倆的字為紅色）
而你把div去了，那就是說這次是給box賦樣式了，那么下面的div根本沒有指定任何樣式，所以按css的規定，靠近元素最近的樣式將生效！
===========================================
-------------------------------------------------------------------------------------------
一、IE6的雙倍邊距BUG
例如:
<style type="text/css">
body {margin:0;}
div {float:left; margin-left:10px; width:200px; height:200px; border:1px solid red;}
</style>
浮動后本來外邊距10px,但IE解釋為20px,解決辦法是加上display:inline
二、為什么FF下文本無法撐開容器的高度？
標準瀏覽器中固定高度值的容器是不會象IE6里那樣被撐開的,那我又想固定高度，又想能被撐開需要怎樣設置呢？辦法就是去掉height設置min-height:200px; 這里為了照顧不認識min-height的IE6 可以這樣定義：
三、怎么樣才能讓層顯示在FLASH之上呢？
解決的辦法是給FLASH設置透明:
<a >:</a>
<pre lang="html" line="1">
<param name="wmode" value="transparent" />
四、怎樣使一個層垂直居中于瀏覽器中？
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>
這里使用百分比絕對定位，與外補丁負值的方法，負值的大小為其自身寬度高度除以二
五、關于IE6樣式中背景圖片不緩存的BUG
示例：
a{ background:url(images/normal.gif); } a:hover { background:url(images/hover.gif); }
如果為超級鏈接定義上述的css樣式以實現鼠標懸浮時的動態效果，在firefox下是沒有什么問題的，第一次加載之后，瀏覽器都會從緩存讀取背景圖片；
而IE6在這里有一個bug，它每次都從服務器端讀取背景圖片，結果就是，若服務器反應較慢hover效果就會出現短暫的空白，令人極度不爽。 一直以來都是通過“兩張背景圖片合并、background-postion控制位置”的方式解決問題的，效果差強人意。
具體來說就是在頁面中加入一段簡單的javascript腳本，告訴ie6：本地有背景圖片的話就不要麻煩服務器了。 document.execCommand("BackgroundImageCache",false,true);
關于這段腳本的放置方式有兩種：
1.用CSS，在css中加入如下代碼
html {}{ filter: expression(document.execCommand("BackgroundImageCache", false, true)); }
2.用JS：document.execCommand("BackgroundImageCache",false,true);