瀏覽器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>