前端零碎問題（一）css hack

hack技術主要針對IE瀏覽器，尤爲是低版本的IE，說實話，微軟都以爲本身的低版本瀏覽器渣渣了，咱們還要兼容，感受到了深深的惡意，

1）: png-24 圖片 IE6 不支持，使用 png-8 的圖片來解決，或者 作兩張圖片，分別使用

2）: 浮動元素 margin 值加倍，給元素增長 display: inline 或 display: inline-block 屬性。

3）: 圖片有個 3px margin，增長屬性 margin: -3px;

4）: 條件註釋：

<!--[if lte IE 6]> 這段文字僅顯示在 IE6及IE6如下版本。 <![endif]--> <!--[if gte IE 6]> 這段文字僅顯示在 IE6及IE6以上版本。 <![endif]--> <!--[if gt IE 6]> 這段文字僅顯示在 IE6以上版本（不包含IE6）。 <![endif]--> <!--[if IE 5.5]> 這段文字僅顯示在 IE5.5。 <![endif]--> <!--在 IE6及IE6如下版本中加載css--> <!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css" mce_href="css/ie6.css" /><![endif]--> 

缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

5）： 經過選擇器區分

/* 一、區別IE和其餘瀏覽器 *，IE 都認識，其餘瀏覽器不認識 */ .demo{ *background: red; background: blue; } /* IE 瀏覽器裏面是紅色，其餘瀏覽器是藍色的 */ /* 二、區別IE6，IE6 不能識別 !important */ /* 三、區別 IE6，IE6 可識別_ */ .demo{ _color: red; color: green; } /* IE6 顏色爲紅色，其餘瀏覽器爲綠色 */ 

6）: IE 低版本下的圓角，用圖片來寫，或者優雅降級（IE 低版本里面用直角）

7）: IE6背景閃爍

若是你給連接、按鈕用CSS sprites做爲背景，你可能會發如今IE6下會有背景圖閃爍的現象。形成這個的緣由是因爲IE6沒有將背景圖緩存，每次觸發hover的時候都會從新加載，能夠用JavaScript設置IE6緩存這些圖片：document.execCommand("BackgroundImageCache",false,true);

8): 最大、最小高度、寬度，利用js來處理，或儘可能避免使用最大、最小寬高

9): 100% 高度，IE6 認爲是父級的100%，所以要給 html、body等分別設置寬度爲100%

10): 清除浮動

若是你想用div(或其餘容器)包裹一個浮動的元素，你會發現必須給div(容器)定義明確的height、width、overflow之中一個屬性（除了auto值）才能將浮動元素嚴實地包裹。

.container {border:1px solid #333; overflow:auto; height:100%;} .floated1 {float:left; height:300px; width:200px; background:#00F;} .floated2 {float:right; height:400px; width:200px; background:#F0F;}