常見瀏覽器的相容問題2

產生因素：塊屬性、float、有橫向margin。

解決方法：display：inline；

解決方法：overflow:hidden;或font-size:0;或line-height：xx px；

解決方法:讓浮動。

解決方法：a 在子標籤最後清浮動

b 父標籤新增

c 給父標籤設定高度

解決方法：(1)：.abc

html>body .abc

(2)：.abc（因為ie6有乙個特徵，當定義乙個高度時，如果內容超過高度，元素會自動調整高度。）

解決方法：li不設寬、高或者li內的標籤不浮動

解決方法：li 設定vertical-align:middle;

解決方法：用hack技術， 例如：所有瀏覽器通用 height:100px; 

ie6專用_height:100px;

ie7專用*+height:100px; 

ie6/ie7共用*height:100px;

解決方法：在行內元素裡加入

解決辦法：給浮動元素新增display:inline;。

filter：alpha（opacity=80）；/*ie支援該屬性*/

opacity：0.8；/*支援css3的瀏覽器*/

---------------------------2014.01.10補充-------------------------------

/*

對於非ie6可以這樣寫
*/#top  
/*但是ie6是不支援fixed定位的，需要另外重寫
*/#top  
/*使用hack使ie6實現該效果，但這個東東會閃爍，需要以下**
*/*html  
/*使固定在頂部
*/#top  
/*固定在底部
*/#top  
/*垂直居中
*/#top

/*

最小寬度 
*/.min_width
/*最大寬度 
*/.max_width
/*最小高度 
*/.min_height
/*最大高度 
*/.max_height

2）所有瀏覽器：它只認第乙個爸爸

層級的高低不僅要看自己，還要看自己的老爸這個後台是否夠硬。用術語具體描述為：

父標籤position屬性為relative或absolute時，子標籤的absolute屬性是相對于父標籤而言的。而在ie6下，層級的表現有時候不是看子標籤的z-index多高，而要看它們的父標籤的z-index誰高誰低。

/*

類內部hack：
*/.header             /*
ie6專用
*/.header         /*
ie7專用
*/.header             /*
ie6、ie7共用
*/.header         /*
ie8、ie9共用
*/.header         /*
ie6、ie7、ie8、ie9共用
*/.header     /*
ie9專用
*//*
選擇器hack：
*/*html .header{}        /*
ie6*/
*+html .header{}    /*
ie7*/

只需將透明png命名為*-trans.png 

需要注意的是：此方法對背景平鋪(background-repeat)和背景(background-position)無法起到任何作用,缺省會佔滿整個容器 

各個瀏覽器透明度設定 

filter:alpha(opacity=80); 

-moz-opacity:0.8; 

opacity: 0.8;

標籤class屬性bug

常見瀏覽器相容問題

1 針對ie5以下和 ie5 firefox 引入檔案區別 import url newstyle.css 後者可以識別，前者不能識別 2 針對ie和firefox指定裝置型別選項 import url newstyle.css screen 後者可以識別，前者不能識別 3 注釋區別 content...

常見瀏覽器相容問題

所謂的瀏覽器相容性問題，是指因為不同的瀏覽器對同一段 有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前，我...

常見瀏覽器相容問題

瀏覽器相容問題一 不同瀏覽器的標籤預設的外補丁和內補丁不同 問題症狀 隨便寫幾個標籤，不加樣式控制的情況下，各自的margin 和padding差異較大。碰到頻率 100 解決方案 css裡 備註 這個是最常見的也是最易解決的乙個瀏覽器相容性問題，幾乎所有的css檔案開頭都會用萬用字元 來設定各個標...