一、CSS1.根據(jù)不同瀏覽器默認(rèn)設(shè)置不同，頁面可初始化樣式，調(diào)整成一致
2.IE8及以下不支持CSS3
3.IE6不支持png格式圖片
4.IE盒模型跟標(biāo)準(zhǔn)盒模型不同，IE下content部分包含padding+border，即設(shè)置width后，再設(shè)置padding等屬性，寬度會(huì)增加
5.a標(biāo)簽中如果有button, 在IE下不能跳轉(zhuǎn)到herf鏈接，而現(xiàn)代瀏覽器可以，解決：IE下button設(shè)置onclick="window.location.href('#')，現(xiàn)代瀏覽器設(shè)置a中href屬性即可。199) ? "200px" : "auto";//寫成函數(shù)來運(yùn)行function setMaxHeight(elementId, height){var container = document.getElementById(elementId);container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto";}//函數(shù)示例setMaxHeight('container1', 200);setMaxHeight('container2', 500);
6.IE hasLayout引發(fā)的IE6顯示不正常BUG
解決辦法：設(shè)置height,width等屬性可激活該屬性，推薦設(shè)置zoom:1;
7.IE6雙邊距BUG
元素設(shè)置浮動(dòng)且又設(shè)置相同方向的外邊距時(shí)，會(huì)產(chǎn)生雙倍的margin邊距
解決辦法：1.設(shè)置 display:inline; 2.利用IE6 hack _margin-left: 實(shí)際距離/2px;
8.IE6 hasLayout 布局問題
(1)擁有布局的元素不會(huì)收縮
(2)布局元素對(duì)浮動(dòng)進(jìn)行自動(dòng)清理
(3)相對(duì)定位的元素沒有布局
(4)在擁有布局的元素之間外邊距不疊加
(5)在沒有布局的塊級(jí)連接上，單擊區(qū)域只覆蓋文本
(6)在滾動(dòng)時(shí)，列表項(xiàng)上的背景圖片間歇性的顯示和消失
9.IE條件注釋<!--[if lt(小)/gt(大) IE 6]> ? ? <![endif]-->
10.IE6奇數(shù)問題
1）字體大小為奇數(shù)之邊框高度少1px
解決方法：字體大小設(shè)置為偶數(shù)或line-height為偶數(shù)
2）line-height，文本垂直居中差1px
解決方法：padding-top代替line-height居中，或line-height加1或減1
3）與父標(biāo)簽的寬度的奇偶不同的居中造成1px的偏離
解決方法：如果父標(biāo)簽是奇數(shù)寬度，則子標(biāo)簽也用奇數(shù)寬度;如果是父標(biāo)簽偶數(shù)寬度，則子標(biāo)簽也用偶數(shù)寬度
11.內(nèi)部盒模型超出父級(jí)時(shí)，父級(jí)被撐大
解決方法：父標(biāo)簽使用overflow:hidden
12.line-height默認(rèn)行高bug
解決方法：line-height設(shè)值
13.行標(biāo)簽之間會(huì)有一小段空白
解決方法：float或結(jié)構(gòu)并排(可讀性差，不建議)
14.標(biāo)簽高度無法小于19px
解決方法：overflow: hidden;
15.左浮元素margin-bottom失效
解決方法：顯示設(shè)置高度 or 父標(biāo)簽設(shè)置_padding-bottom代替子標(biāo)簽的margin-bottom or 再放個(gè)標(biāo)簽讓父標(biāo)簽浮動(dòng)，子標(biāo)簽
margin- bottom，即(margin-bottom與float不同時(shí)作用于一個(gè)標(biāo)簽)
16.img于塊元素中，底邊多出空白
解決方法：父級(jí)設(shè)置overflow: hidden; 或 img { display: block; } 或 _margin: -5px;
17.li之間會(huì)有間距
解決方法：float: left;
18.塊元素中有文字及右浮動(dòng)的行元素，行元素?fù)Q行
解決方法：將行元素置于塊元素內(nèi)的文字前
19.position下的left，bottom錯(cuò)位
解決方法：為父級(jí)(relative層)設(shè)置寬高或添加*zoom:1
20.子級(jí)中有設(shè)置position，則父級(jí)overflow失效
解決方法：為父級(jí)設(shè)置position:relative
21.CSS選擇器區(qū)分
IE6不支持子選擇器；先針對(duì)IE6使用常規(guī)申明CSS選擇器，然后再用子選擇器針對(duì)IE7+及其他瀏覽器。
/* IE6 專用 */
.content {color:red;}
/* 其他瀏覽器 */
div>p .content {color:blue;} -->
22.IE6背景閃爍
如果你給鏈接、按鈕用CSS sprites作為背景，你可能會(huì)發(fā)現(xiàn)在IE6下會(huì)有背景圖閃爍的現(xiàn)象。造成這個(gè)的原因是由于IE6沒有將背景圖緩存，每次觸發(fā)hover的時(shí)候都會(huì)重新加載，可以用JavaScript設(shè)置IE6緩存這些圖片：
document.execCommand("BackgroundImageCache",false,true);
23.最小高度
IE6 不支持min-height屬性，但它卻認(rèn)為height就是最小高度。解決方法：使用ie6不支持但其余瀏覽器支持的屬性：
#container {min-height:200px; height:auto !important; height:200px;}
24.最大高度
//直接使用ID來改變?cè)氐淖畲蟾叨?/p>
var container = document.getElementById('container');
container.style.height = (container.scrollHeight > 199) ? "200px" : "auto";
//寫成函數(shù)來運(yùn)行
function setMaxHeight(elementId, height){
var container = document.getElementById(elementId);
container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto";
}
//函數(shù)示例
setMaxHeight('container1', 200);
setMaxHeight('container2', 500);
25.100% 高度
在IE6下，如果要給元素定義100%高度，必須要明確定義它的父級(jí)元素的高度，如果你需要給元素定義滿屏的高度，就得先給html和body定義height:100%;
26.最小寬度:同max-height和max-width一樣，IE6也不支持min-width。
//直接使用ID來改變?cè)氐淖钚挾?/p>
var container = document.getElementById('container');
container.style.width = (container.clientWidth < width) ? "500px" : "auto";
//寫成函數(shù)來運(yùn)行
function setMinWidth(elementId, width){
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth < width) ? width + "px" : "auto";
}
//函數(shù)示例
setMinWidth('container1', 200);
setMinWidth('container2', 500);
