IE6,IE7,IE8 CSS Bug兼容解決

1：li 邊距「無端」增長

任何事情都是有緣由的，li邊距也不例外。
先描述一下具體情況：有些時候li邊距會忽然增 加不少，值也不固定（只在IE6/IE7有這種現象），讓人摸不着頭腦，仔細「研究」發現是因爲其 低級元素ul的padding引 起，padding的上下值對li有影響，左右無影 響。因此只好笨手笨腳地把padding去掉，換成margin。 這是能解決問題，但每每不是咱們想要的結果，或許 還會引發其餘沒必要要的怪現象。

如今終於發現解決這個問題的方法，其實很簡單，既然是有ul引 起的，就設置ul的顯示形式爲*display:inline-block;便可，前面加*是隻 針對IE6/IE7有效，其餘瀏覽器並不渲染這個屬性。

2：分頁數字 字體用「Arial 」加粗不抖動

CSS：

body, ul, h1 {
    font-family:Arial;
    font-size:12px;
}
.page {
    text-align:center;
}
.page a {
    display:inline-block;
    padding:5px 8px;
    text-decoration:none;
    border:1px solid #09F;
    background-color:#0CF;
    color:#FFF;
}
.page a:hover, .page .selected {
    border:1px solid #CCC;
    background-color:#FFF;
    color:#000;
    font-weight:bold;
}

HTML：

<h1>分頁樣式</h1>
<div class="page">            
    <a href="#">1</a> 
    <a href="#"class="selected">2</a> 
    <a href="#">3</a> 
    <a href="#">4</a> 
    <a href="#">5</a>
    <a href="#">6</a> 
    <a href="#">7</a> 
    <a href="#">8</a> 
    <a href="#">9</a> 
    <a href="#">10</a> 
</div>

3：IE6 CSS選擇器區分IE6
IE6不支持子選擇器；先針對IE6使用常規申明CSS選擇器，而後再用子選擇器針對IE7+及其餘瀏覽器。
/IE6 專用 /

.content {color:red;}

/ 其餘瀏覽器 /

div>p .content {color:blue;}

4：IE6最小高度
IE6不支持min-height屬性，但它卻認爲height就是最小高度。解決方法：
使用IE6不支持但其他瀏覽器支持的屬性!important。

#container{min-height:200px; height:auto !important; height:200px;}

5：IE6100% 高度
在IE6下，若是要給元素定義100%高度，必需要明肯定義它的父級元素的高度，若是你須要給元素定義滿屏的高度，就得先給html和body定義height:100%;

6：IE6躲貓貓bug
在IE6和IE7下，躲貓貓bug是一個很是惱人的問題。一個撐破了容器的浮動元素，若是在他以後有不浮動的內容，而且有一些定義了:hover的連接，當鼠標移到那些連接上時，在IE6下就會觸發躲貓貓。
解決方法很簡單：

1. 在（那個未浮動的）內容以後添加一個<span style="clear: both;"> </span>
2. 觸發包含了這些連接的容器的hasLayout，一個簡單的方法就是給其定義height:1%;

7:IE6絕對定位元素的1像素間距bug
IE6下的這個錯誤是因爲進位處理偏差形成（IE7已修復），當絕對定位元素的父元素高或寬爲奇數時，bottom和right會產生錯誤。惟一的解決辦法就是給父元素定義明確的高寬值，但對於液態佈局沒有完美的解決方法。

8: IE下z-index的bug
在IE瀏覽器中，定位元素的z-index層級是相對於各自的父級容器，因此會致使z-index出現錯誤的表現。

解決方法：

其父級元素定義z-index，有些狀況下還須要定義position:relative

9: Overflow Bug
在IE6/7中，overflow沒法正確的隱藏有相對定位position:relative;的子元素。
解決方法：

給外包容器.wrap加上position:relative;。

10: 橫向列表寬度bug
若是你使用float:left;把<li>橫向擺列，而且<li>內包含的<a>（或其餘）觸發了 hasLayout，在IE6下就會有錯誤的表現。
解決方法：

給<a>定義一樣的float:left;

11: 列表階梯bug
列表階梯bug一般會在給<li>的子元素<a>使用float:left;時觸發，咱們本意是要作一個橫向的列表(一般 是導航欄)，但IE卻可能呈現出垂直的或者階梯狀。
解決辦法：

給<li>定義float:left;而非子元素<a>，或者 給<li>定義display:inline;也能夠解決。

12: 垂直列表間隙bug
當咱們使用<li> 包含一個塊級子元素時，IE6(IE7也有可能)會錯誤地給每條列表元素（<li>）之間添加空隙。
解決方法：

方法1：.clear{clear:both;}清除float來解決這個問題；
方法2：觸發<a>的hasLayout（如定 義高寬、:使用zoom:1;）;
方法3：給<li> 定義display:inline;來解決此問題；另外還有一個極有趣的方法，給包含的文本末尾添加一個空格。

13: IE6調整窗口大小的 Bug
當把body居中放置，改變IE瀏覽器大小的時候，任何在body裏面的相對定位元素都會固定不動了。
解決辦法：

給body定義position:relative;

14: 文本重複Bug
在IE6中，一些隱藏的元素（如註釋、display:none;的元素）被包含在一個浮動元素裏，就有可能引起文本重複bug。
解決辦法

給浮動元素添加display:inline;

15：如何去掉點擊連接時的虛線

在 CSS 中加入以下代碼：

:focus{{ouline:0;}
a,a:hover{outline:none; blur:expression(this.onFocus=this.blur());}

16：css reset中的list-style:none
在IE6,7下
1)當ul不具備float:left;display:inline;時,
不管有沒有list-style:none這個屬性,列 表符都被隱藏,不佔位置
2)當ul具備float:left;display:inline;屬性時,
list- style:none,列表符被隱藏,可是仍然留有位置(list-style-position:inside);
未設置list-style:none;列表符被隱藏,也不佔位(list-style-position:outside)
在firefox中只要list-style-type爲none ,則 不管list-stype-position的值爲outside或inside , list-style都能很好的被隱藏
而在IE6,7中,僅 設置list-style:none,並不足以解決全部問題

在css reset的時候使用 list-style:none outside none 更好

17: IE6中僞類:hover的使用及Bug
之前不曾遇到相似的問題，一番google，才知道這是IE6處理CSS僞類:hover的Bug。例如以下的代碼：

a {color: #333;}
a span {color: green;}
a:hover {}
a:hover span {color: red; }

<a href=」http://www.taobao.com「> 淘寶網 <span> 淘你喜歡 </span></a>

在IE7/FF中，鼠標移動到連接上時，」淘你喜歡」字樣會變爲紅色，但IE6則無反應。因此IE6的bug就是若是a 與 a:hover的css定義是同樣的，也就是說若是a:hover 中沒有樣式的改變，hover就不會被觸發。但若是在a:hover{}增長一些特定的屬性，例如

a:hover{border:none;}

或者

a:hover{padding:0;}

又或者

a:hover{background: none;}

此時hover就能夠觸發了。

18:去掉button按鈕左右兩邊的留白

input,button{overflow:visible;padding:0;}

<input type="submit" name="button" id="button" value="左右留白的解決方法" />

19:中文字體在css中的寫法

黑體SimHei\9ED1\4F53黑體 宋體SimSun\5B8B\4F53宋體
新宋體 NSimSun\65B0\5B8B\4F53新宋體 仿宋FangSong\4EFF\5B8B仿宋
楷體KaiTi\6977\4F53 楷體
微軟正黑體Microsoft JhengHei\5FAE\x8F6F\6B63\9ED1\4F53微軟正黑體
微軟雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1微軟雅黑 幼圓 YouYuan\5E7C\5706幼圓

20:IE6下css實現max/min-width/height

_width:expression(this.width>300?"300px":ture); max-width:300px;

_height:expression(this.height>300?"300px":ture); max-height:300px;

來自 http://www.wufangbo.com/ie6-ie7-ie8-css-bug-2/