我的微博終於在前幾天建立了 雖說很早之前就知道博客園這個地方 但怕自己不能堅持去寫一些東西一直沒有建。這幾天 我做了這個決定 把我的博客建起來 每周發一些看到的，聽到了一些前端知識或者前沿技術。
另外說一句，我是一個前端小白 所以高手就忽略我吧 免得說我班門弄斧 我只是想寫點或記錄點東西 可能還會幫助一些比我更加新的新手 共同成長 ^_^！
好了，廢話不說了，眾所周知，IE6…………（對不起 先讓我惡心下....） 隨着高級瀏覽器的風靡 不僅是前端開發人員 就連他的父母“大微軟”也恨不得他早點滅亡 但這並不是ie6的責任 這是時代發展的必然結果 我相信 在前端摸爬滾打的很多前輩們 肯定對ie6有着感情。據說ie6在明年中上旬就正式推出歷史舞台了 很多大型網站已經宣布不再兼容IE6 另外ie6在美國的占有率已經不足1% 但是在中國ie的占有率還是很高的 個人認為ie6不會這么快就消失 因為在中國絕大多數人都在用盜版microsoft 只要用他能上一些他們經常上的網站，比如baidu，taobao等（上這些網站時報錯不算！） 那么人們就不會花時間再下一個新的。所以如果你想做前端css 就必須了解他的一些常見bug。
1. IE6的3像素BUG產生條件及解決方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>IE6的3像素bug </title>
<style type="text/css">
#sideBar{
width:100px;
height:100px;
background:#6bee68;
float:left;
}
#content{
width:200px;
height:100px;
background:#56bcf3;
}
</style>
</head>
<body>
<div id="sideBar">sideBar</div>
<div id="content">content</div>
</body>
</html>
解決方法：只需要給content加上浮動，就OK了
2. margin加倍的問題
設置為float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div里面加上display:inline;
例如：
<#div id=”imfloat”>
相應的css為
#imfloat{ float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/}
3.IE6文字溢出bug（不常見）
[html]<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
< title>IE6文字溢出bug</title>
< /head>
< body>
< div style="width:400px">
< divstyle="float:left"></div>
< !-- -->
<divstyle="float:right;width:400px">↓這就是多出來的那個字</div>
< /div>
< /body>
< /html>[/html]
經測試，只有IE6中有文字溢出bug,ie7 8火狐正常。在ie6會顯示 ’↓這就是多出來的那個字字’，多出了一個字
去除 <divstyle=”float:left”></div>中的“float:left;”，你會發現多出來的“字”字不見了，頁面正常顯示。同樣去除 <divstyle=”float:right;width:400px”>中的“float:right;”，多余的“字”字也同樣消失，頁面正常顯示。
將注釋轉移到 <divstyle=”float:left”></div>前面，多余的“”字消失，頁面正常顯示。將注釋轉移到 <divstyle=”float:right;width:400px”> ↓這就是多出來的那個字</div>下面，多余的“字”字也同樣消失，頁面正常顯示。
去除 <divstyle=”float:right;width:400px”>中的“width:400px”，多余的“字”字消失，頁面正常顯示。
增加注釋的條數：當1條注釋時，則多出來 1 個字；2 條注釋時，則多出來 3 個字；3條注釋時，則多出來 5 個字……我們會從上面的規律中得到這樣一個公式：溢出文字的字數=注釋的條數*2-1，這里的字數在中文或英文數字時都成立。當溢出的文字字數大於文本的字數時，文字區塊將會消失。
當div應用復雜的時候每個欄中又有一些鏈接，DIV等這個時候容易發生捉迷藏的問題。
有些內容顯示不出來，當鼠標選擇這個區域是發現內容確實在頁面。 解決辦法：對#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結構盡量簡單。
min-width是個非常方便的CSS命令，它可以指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上把 width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個＜div> 放到 ＜body> 標簽下，然后為div指定一個類,然后CSS這樣設計：
#container{ min-width: 600px; width:expression(document.body.clientWidth ＜ 600? "600px": "auto" );}
發生場合：當ul/ol觸發了haslayout並且是在ul/ol上寫margin-left，前面默認的ul/ol標記會消失。
解決方法：給li設置margin-left，而不是給ul/ol設置margin-left。
原理分析：IE6/7瀏覽器Bug
IE6/7下margin與absolute元素重疊bug：
發生場合：雙欄自適應布局中，左側元素absolute絕對定位，右側的margin撐開距離定位。在IE6/7下左側應用了absolute屬性的塊級元素與右邊的自適應的文字內容重疊。
解決方法：把左側塊級元素更改為內聯元素，比如把div更換為span。
原理分析：這是由於IE6/IE7瀏覽器將inline水平標簽元素和block水平的標簽元素沒有加以區分一視同仁渲染了。屬於IE6/7瀏覽器渲染Bug。
IE6/7/8下auto margin居中bug：
發生場合：給block元素設置margin auto無法居中
解決方法：出現這種bug的原因通常是沒有Doctype，然后觸發了ie的quirks mode，加上Doctype聲明就可以了。在《打敗IE的葵花寶典》里給出的方法是給block元素添加一個width能夠解決，但根據本人親測，加with此種方法是無效的，如果沒有Doctype即使給元素添加width也無法讓block元素居中。
原理分析：缺少Doctype聲明。
解決方法：可以給為input加上寬度
原理分析：IE8瀏覽器Bug。
IE8百分比padding垂直margin bug：
解決方法：給父元素加一個overflow:hidden/auto。
原理分析：IE8瀏覽器Bug。