IE6~8 CSS hack

版本\hack	_	*	\0	\9
IE 6	√	√	×	√
IE 7	×	√	×	√
IE 8	×	×	√	√

各類寫法如下： .test{
    _color:#FF0000;         /*僅 IE6支援 */      *color:#FFFF00;          /* 僅 IE6、7支援 */     color:#0000FF\0;/* 僅 IE8支援 */     color:#0000FF\9;       /* 所有IE瀏覽器(IE6+)支援 */
}
IE6 float 換行

• • 在浮動元素上新增如下程式碼
  • display: inline-block;
  • overflow: hidden;

IE6 a:hover 問題

• 原因：是ie6對a:hover子標籤的解讀是建立在父標籤的hover設定上的，換句話說如果不設定任何父標籤a:hover{}則ie6就會停止對a的子標籤hover解讀

比如
a:hover em{color:#F00;}
<a href ="#">滑鼠經過時改變我的<em>顏色</em></a>
上述程式碼不會生效。需改成 （只要存在 a:hover {} 即可，不管裡面是什麼規則） a:hover {zoom: 1;} a:hover em{color:#F00;}
<a href ="#">滑鼠經過時改變我的<em>顏色</em></a>
參考文件： IE6 CSS高度height:100% 無效 IE6~8 a 超連結被擊穿問題

• 描述：當用超連結 a 絕對定位在某個元素 ele（內含圖片或者文字）上時，超連結 a 會被擊穿，滑鼠放在 ele 上的圖片或者文字上時，超連結無效，並且無法跳轉。
• 解決方案：設定超連結的背景（不能為transparent），然後通過 filter 設定透明度。

比如   .first.second {} .third.second {} 上述兩句都只會應用的 .second 上，並且第二句會覆蓋第一句  IE6相對父容器絕對定位的bug IE6 固定定位 IE6不支援固定定位，但是可以依靠絕對定位和 JS 來模擬。具體程式碼為：     var pos6 = function(){         var scrollHeight = $(window).scrollTop();         var bodyHeight   = $('body').height();         floatwrap.css('top', (scrollHeight - 532) + 'px');         floatwrap.css('right','-48px');     };     var ie6float = function(){         if (!$.isIE6){             return ;         }         floatwrap.css('display','block').css('position','absolute');         pos6();         var ie6timer;         var _goPos = function(){             floatwrap.css('display','none');             clearTimeout(ie6timer);             ie6timer = setTimeout(function(){                 floatwrap.css('display','block');             },200);             pos6();         };         $(window).on('scroll',function(){             _goPos();         });         $(window).on('resize',function(){             _goPos();         });     };     ie6float(); IE 6~8（9及以上沒有測） 輸入框內容高度相容性問題 對於下面一段程式碼：phone-text是輸入框，輸入框 height + 上下pading + 上下border = 48  .phone-text {     width: 180px;     height: 40px;     font-size: 24px;     border: 2px solid #fd5c47;     padding: 2px 5px;     vertical-align: middle; } chrome下，會自動將輸入的文字垂直居中 IE 6~8下：，不會將輸入的問題垂直居中 將程式碼改成  .phone-text {     width: 180px;     height: 24px;     font-size: 24px;     border: 2px solid #fd5c47;     padding: 10px 5px;     vertical-align: middle; } IE 6、7下將 塊級元素設定為display:inline-block失效 解決方法： {     display: inline-block;    /*在 display: inline-block 下面新增以下兩個規則*/     *zoom: 1;     *display: inline; } IE 6 overflow: hidden; 失效 通用的清楚浮動的方法，在浮動元素的父元素上新增類：clearfix .clearfix:after {     content:"020";     display:block;     height:0;     clear:both;     visibility:hidden } .clearfix {     zoom:1 } 七夕不虐狗，單身大拯救+陳曉龍[email protected]