1、<!DOCTYPE 類型 頂級元素（默認html，可省略） 訪問權限 "註冊//組織//類型 標籤定義//語言” URL（引用對象的位置） >詳解
1）Strict DTD如果需要乾淨的標記，免於表現層的混亂，請使用此類型。該類型必須與層疊樣式表（CSS）配合使用：
<!DOCTYPE html PUBLIC “-//W3C/DTD HTML 4.0.1 //EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<!DOCTYPE html PUBLIC “-//W3C/DTD XHTML 1.0 Strict //EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
2)Transitional DTD 可包含 W3C 所期望移入樣式表的呈現屬性和元素（即在html標籤中包含了樣式標籤）。可以在不支持層疊樣式表（CSS）的瀏覽器中使用html 的呈現樣式，請使用此類型：
<!DOCTYPE html PUBLIC “-//W3C/DTD HTML 4.0.1 Transitional //EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<!DOCTYPE html PUBLIC “-//W3C/DTD XHTML 1.0 Transitional //EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd”>
3）Frameset DTD用於帶有框架的文檔。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同於 Transitional DTD
<!DOCTYPE html PUBLIC “-//W3C/DTD HTML 4.0.1 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>
<!DOCTYPE html PUBLIC “-//W3C/DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1- frameset.dtd”>
2、浮動後產生的IE雙倍距離（margin加倍）問題
設置爲float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div裏面加上display:inline;舉例說明
#imfloat{
float:left;
margin:5px;/*IE下理解爲10px*/
display:inline;/*IE下理解爲5px*/}
Display的三個主要屬性：display:none;//不顯示 display:block;//轉爲塊狀元素可以對內聯元素進行塊狀元素操作 display:inline; //轉爲內聯元素 不換行顯示
3、頁面的最小寬度和高度問題
其他瀏覽器用min-width、min-height指定元素最小寬度和高度
ie把正常的width和height當做最小寬度和高度來使。
產生的問題：
如果只用寬度和高度，其他的瀏覽器裏這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等於沒有設置寬度和高度。
解決方法：
因此，其他瀏覽器height和width要設置爲auto，min-height和min-width設爲固定值，ie瀏覽器height和width設爲固定值
1、使用!important
{ height:auto!important; height:200px; min-height:200px;
width:auto!important; width:200px; min- width:200px; }
2、#box{ width: 80px; height: 35px;}
html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
3、可以把一個＜div> 放到 ＜body> 標籤下，然後爲div指定一個類,然後CSS這樣設計：
#container{ min-width: 600px; width:expression(document.body.clientWidth ＜ 600? "600px": "auto" );}
第一個min-width是正常的；但第2行的width使用了Javascript，這隻有IE才認得，這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現最小寬度。
以下爲引用內容：
#container{ min-width: 600px; width:expression(document.body.clientWidth ＜ 600? "600px": "auto" );}
第一個min-width是正常的；但第2行的width使用了Javascript，這隻有IE才認得，這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現最小寬度。
4、一個層相對於瀏覽器居中
這裏我們使用百分比絕對定位,與外補丁負值的技巧,負值的大小爲其自身寬度高度除以二
以下爲引用內容：
<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>
5、單行垂直居中
vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:height; 然後插入文字，就垂直居中了。缺點是要控制內容不要換行
#topArea {
height:22px;
line-height:22px;
vertical-align:middle;//垂直居中
}
6、ie63像素bug
_margin-right:-3px;//_XXXXX只有IE6起作用
7、IE捉迷藏問題
當div應用複雜的時候每個欄中又有一些鏈接，DIV等，這個時候容易發生捉迷藏的問題。
有些內容顯示不出來，當鼠標選擇這個區域（拖動選擇）是發現內容確實在頁面。 解決辦法：對#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結構儘量簡單。
8、清除浮動
在浮動層後加一個同輩div class=”clearfloat”，設置樣式
Div .clearfloat{clear:both;height:0;font-size:1px;line-height:0;
例如：＜#div id=”floatA” >＜#div id=”floatB” >＜#div id=”NOTfloatC” >這裏的NOTfloatC並不希望繼續平移，而是希望往下排。(其中floatA、floatB的屬性已經設置爲float:left;)
這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC並非float標籤，必須將float標籤閉合。在 ＜#div class=”floatB”> ＜#div class=”NOTfloatC”>之間加上 ＜#div class=”clear”>這個div一定要注意位置，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關係，否則會產生異常。並且將clear這種樣式定義爲爲如下即可： .clear{ clear:both;}
作爲外部 wrapper 的 div 不要定死高度,爲了讓高度能自動適應，要在wrapper裏面加上overflow:hidden; 當包含float的box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了兼容。
例如某一個wrapper如下定義：
以下爲引用內容：
.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
對於排版,我們用得最多的css描述可能就是float:left.有的時候我們需要在n欄的float div後面做一個統一的背景,譬如:
以下爲引用內容：
<div id=”page”>
<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>
</div>
比如我們要將page的背景設置成藍色,以達到所有三欄的背景顏色是藍色的目的,但是我們會發現隨着left center right的向下拉長,而page居然保存高度不變,問題來了,原因在於page不是float屬性,而我們的page由於要居中,不能設置成 float,所以我們應該這樣解決
以下爲引用內容：
<div id=”page”>
<div id=”bg” style=”float:left;width:100%”>
<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>
</div>
</div>
再嵌入一個float left而寬度是100%的DIV解決之
萬能float 閉合(非常重要!)
關於 clear float 的原理可參見 [How To Clear Floats Without Structural Markup],將以下代碼加入Global CSS 中,給需要閉合的div加上 class="clearfix" 即可,屢試不爽.
以下爲引用內容：
/* Clear Fix */
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
或者這樣設置：.hackbox{ display:table; //將對象作爲塊元素級的表格顯示}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
9、解決內層高度發生變化 外層高度不能調節問題
高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用margin 或padding 時。
例：
以下爲引用內容：
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id="box">
<p>p對象中的內容＜/p>
</div>
解決技巧：在P對象上下各加1空的div對象CSS代碼：.1{height:0px;overflow:hidden;}或者爲DIV加上border屬性。
10、IE6下爲什麼圖片下有空隙產生
解決這個BUG的技巧也有很多,可以是改變html的排版,或者設置img 爲display:block 或者設置vertical-align 屬性爲vertical-align:top
bottom middle text-bottom 都可以解決.
11、LI中內容超過長度後以省略號顯示的技巧
此技巧適用與IE與OP瀏覽器
以下爲引用內容：
<style type="text/css">
<!--
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
-->
</style>
12爲什麼web標準中IE無法設置滾動條顏色了
解決辦法是將body換成html
以下爲引用內容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http.//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
＜/style>