本文測試工具:ie11自帶各種版本ie除錯,但是沒有ie6,ie6使用ietester,文中測試如有瑕疵,望指出。
五大瀏覽器核心代表:
trident:iemaxthon(遨遊)、theworld世界之窗、360瀏覽器
gecko:monzillafixfox開源。
webkit:safairchrome 開源
presto:opera 世界公認渲染速度最快的引擎
blink:google和opera software開發的瀏覽器排版引擎 2013.4發布
css bug:css樣式在各瀏覽器中解析不一致的情況,或者說css樣式在瀏覽器中不能正確顯示的問題稱為css bug.
css hack:css中,hack是指一種相容css在不同瀏覽器中正確顯示的技巧方法,因為它們都屬於個人對css**的非官方修改,
或非官方補丁。有些人更喜歡使用patch(補丁)來描述這種行為。
filter:表示過濾器的意思。它是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規則或宣告的方法。本質上講,filter是一種用來過濾不同瀏覽器的hack型別。
ie6常見css解析bug及hack
1.間隙
div中的間隙(<=ie9)
描述:在div中插入時,會將div下方撐大三畫素
hack1:將
與hack2:將
撐大三畫素:
相容後的**以及:
2.雙倍浮向(ie6雙倍邊距)描述:當ie6版本瀏覽器在解析浮動元素時,會錯誤地把浮向邊界加倍顯示
hack:給浮動元素新增宣告:_display:inline;
解析:加下劃線,只針對ie6及以下起作用。
雙倍邊距:
相容後的**以及:
3.預設高度(<=ie6)描述:在ie6及以下版本中,部分塊元素擁有預設高度(低於18px高度)
hack1:給元素新增宣告:font-size:0;
hack2:給元素新增宣告:overflow:hidden;
解析:使用font-size可能對塊內文字可能有一定影響.
預設高度:
相容後的**以及:
4.表單元素行高不一致(ie moz c o s)描述:表單元素行高對齊方式不一致
hack:給表單元素新增宣告:float:left;
行高不一致:
相容後**以及:
5.按鈕元素預設大小不一描述:各瀏覽器中按鈕元素大小不一致
hack1:統一大小/(用a標記模擬)
hack2:在input上寫按鈕的樣式,一定要把input的邊框去掉
hack3:如果這個按鈕是乙個,直接把作為按鈕的背景圖即可。
相容後的**以及:
提交
6.百分比bug描述:在ie6及以下版本中在解析百分比時,會按四捨五入方式計算從而導致50%加50%大於100%的情況。
hack:給右面的浮動元素新增宣告:clear:right;
解析:測試中ie5,ie6沒問題,ie7出現大於100%情況,用上面的方法可以解決。
大於100%:
相容後**以及:
7.滑鼠指標bug描述:cursor屬性的hand屬性值只有ie瀏覽器識別,其它瀏覽器不識別該宣告,
cursor屬性的pointer屬性值ie6.0以上版本及其它核心瀏覽器都識別該宣告
hack:如統一某元素滑鼠指標形狀為手型,應新增宣告:cursor:pointer;
測試:cursor屬性的pointer值ie5及以上的都支援,hand屬性值ie9不支援,火狐也不支援。
滑鼠指標**以及:
8.透明屬性
ie瀏覽器寫法:filter:alpha(opacity=value);取值範圍1-100
相容其它瀏覽器寫法:opacity:value;(value的取值範圍0-1,0.1 0.2...0.9)
透明屬性:
相容後**以及:
過濾器(filter)
1.下劃線屬性過濾器
它表示所附加的宣告具有最高優先順序的意思。但由於ie6及更低版本不能識別它,我們可以利用ie6這個bug作為過濾器來相容ie6和其它標準的瀏覽器
語法:選擇符
3.*屬性過濾器
當在乙個屬性前面增加了*後,該屬性只能被ie7瀏覽器識別,其它瀏覽器忽略該屬性的作用。
語法:選擇符
瀏覽器相容
瀏覽器相容問題一 不同瀏覽器的標籤預設的外補丁和內補丁不同 問題症狀 隨便寫幾個標籤,不加樣式控制的情況下,各自的margin 和padding差異較大。碰到頻率 100 解決方案 css裡 備註 這個是最常見的也是最易解決的乙個瀏覽器相容性問題,幾乎所有的css檔案開頭都會用萬用字元 來設定各個標...
瀏覽器相容
1 css bug css樣式在各瀏覽器中解析不一致的情況,或者說 css樣式在瀏覽器中不能正確顯示的問題稱為 css bug.2 css hack css中,hack 是指一種相容 css在不同瀏覽器中正確顯示的技巧方法,因為它們都屬於個人對 css 的非官方的修改,或非官方的。有些人更喜歡使用 ...
瀏覽器相容
所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前,我...