xhtml+css 瀏覽器BUG處理方法整理

 瀏覽器BUG處理方法整理(部分),供喜歡網頁設計的朋友共享:
1. 星號*
   IE都能識別*,標準瀏覽器如FF不能識別*。
   例:p { color:yellow; *color:red;}
   類似的有
   + 加號
   只有IE解釋
   p{color:red; +color:blue}
   IE 顯示blue  FF顯示 red
2.!important
   IE6及以下將會忽略該樣式,IE7 FF將支持;
   p{color:red !important;color:yellow;}
   IE7 FF將紅色  IE6顯示黃色
   此處注意的是!important方法只是按上述格式後才被IE6及以下忽略,除此之外的提高樣式權重方法可通用。
3.下劃線。
   IE6及以下版本將運用該樣式,其他將忽略
   p{color:red; _color:blue}

4、註釋:   
    p {color:red};     
    這種樣式在IE6中是可以應用顯示的,而在IE5及以下版本是不會被處理的,所以可以針對IE5/6進行區別
5、@IMPORT:
    在@IMPORT中使用URL來導入樣式,標準用法是將URL中的值帶上引號,如下@IMPORT URL("newstyle.css");這種用法  可以被IE5以上的瀏覽器及FF支持,從而實現了IE4的樣式單獨處理.
    另外,還有一個方法:
    @IMPORT URL("noie.css") screen;
    screen是用於指定設備類型的選項,screen用於屏幕顯示,print用於打印設備顯示但是IE對這種方法不支持,,所有的IE瀏覽器,從而可以進行IE和FF的區別。
6、屬性選擇符:    用於對具有特定屬性的對象進行選擇
    span[class=left]{color:blue}     
    span[title]{color:red;}    
   IE6不支持,但是在FF裏面工作正常,所以可以對IE和FF進行分別處理.
    在實際開發中,經常要對IE和FF進行分別處理,可以用如下代碼:
    #content{
    color:red;
    }
    [xmlnx] #content{
    color:blue
    }
   此種方法我覺得很實用,也經常用,推薦朋友使用,如需更詳細的說明,我可以再發貼。
7.子對象選擇符:
   span>p{color:red}
   IE6也是沒有支持,也可用來區別IE和FF
8、Tantek方法
   #content{
               color:blue;
               voice-family:"/"}/"";
               voice-family:inherit;
               color:red;
   }
   上面的代碼在使用了voice-family之後下面的color:red,將不會被IE5.5及以下瀏覽器所解析.因此在IE6/7/FF上文本顏色將呈現紅色,在IE5.5及以下瀏覽器上將呈現藍色;
   另外,voice-family還有一種處理方式:
   #content{
                color:red;
                voice-family:"}"
                voice-family:inherit;
                color:blue;
   }
   使用這個方法,將使IE6及以下版本瀏覽器與FF瀏覽器的文字都呈現紅色,而IE5及以下版本瀏覽器呈現藍色!
9、轉義屬性
    p{w/idth:200px;}
    IE5.5 以下將忽略。注意:反斜線字符不能出現在0-9或字母a-f前面
10、IE中的條件註釋
一、條件註釋簡介
    IE中的條件註釋(Conditional comments)對IE的版本和IE非IE有優秀的區分能力,是WEB設計中常用的
    hack方法。
    條件註釋只能用於IE5以上。
    如果你安裝了多個IE,條件註釋將會以最高版本的IE爲標準。
    條件註釋的基本結構和HTML的註釋(<!– –>)是一樣的。因此IE以外的瀏覽器將會把它們看作是普通的
註釋而完全忽略它們。
    IE將會根據if條件來判斷是否如解析普通的頁面內容一樣解析條件註釋裏的內容。
二、條件註釋屬性
    gt : greater than,選擇條件版本以上版本,不包含條件版本
    lt : less than,選擇條件版本以下版本,不包含條件版本
    gte : greater than or equal,選擇條件版本以上版本,包含條件版本
    lte : less than or equal,選擇條件版本以下版本,包含條件版本
    ! : 選擇條件版本以外所有版本,無論高低
三、條件註釋使用方法
    注意把代碼中的<>換成英文中相應的大於或小於號
    <!--[if IE 5]>僅IE5.5可見<![endif]-->
    <!--[if gt IE 5.5]>僅IE 5.5以上可見<![endif]-->
    <!--[if it IE 5.5]>僅IE 5.5以下可見<![endif]-->
    <!--[if gte IE 5.5]>IE 5.5及以上可見<![endif]-->
    <!--[if ite IE 5.5]>IE 5.5及以下可見<![endif]--><!--[if !IE 5.5]>非IE 5.5的IE可見<![endif]
    -->
    下面的代碼是在非IE瀏覽器下運行的條件註釋
    <!--[if !IE]><!-->您使用不是 Internet Explorer<!--<![endif]-->
    <!--[if IE 6]><!-->您正在使用Internet Explorer version 6或者 一個非IE 瀏覽器<!--<![endif]-


css hack方法
<style>
body{
 background-color:#CCCCCC; /* 在所有瀏覽器下都可識別 */
 +background-color:#990000; /* 僅在IE7下識別 */
 -background-color:#006600; /* 僅在IE6下識別 */
 }
</style>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章