近期,本人一直在做ofbiz的全瀏覽器相容,現在已經搞定了,特此寫點東西分享
全瀏覽器?其實主要工作還是在ie6上,其他瀏覽器問題不多,就不說其他瀏覽器問題了。ofbiz在ie6下可謂「面目全非」啊,沒法正常使用。可能從一開始ofbiz就沒有打算相容ie6吧,想想也對,被微軟遺棄的孩子誰會相容啊。可是,客戶幾乎多半系統都是在ie6環境下,所以這個ie6的相容必須要搞。
廢話已盡,下面談談這些問題,我只歸類,不提供具體實現code.
相容性其實本質就是利用不同瀏覽器的不同支援以及bug(css hack)。
下面給出2個css hack
1、ie6支援屬性命名前加「_」.唯一標識ie6,其他瀏覽器都不支援
2、css hack
一、 引起的問題
問題:ofbiz在ie6下,png的幾乎都成灰底。
解決:利用微軟瀏覽器濾鏡實現透明,當然這個用多了會影響頁面載入效率的,好在ofbiz類似處理不多。
語法:filter: progid:dximagetransform.microsoft.alphaimageloader(src=' example.png'); /* ie6 */
background-image: none; /* ie6 */
enabled : 可選項。布林值(boolean)。設定或檢索濾鏡是否啟用。true | false true : 預設值。濾鏡啟用。
false : 濾鏡被禁止。
sizingmethod : 可選項。字串(string)。設定或檢索濾鏡作用的物件的在物件容器邊界內的顯示方式。 crop : 剪下以適應物件尺寸。
image : 預設值。增大或減小物件的尺寸邊界以適應的尺寸。
scale : 縮放以適應物件的尺寸邊界。
src : 必選項。字串(string)。使用絕對或相對 url 位址指定背景影象。假如忽略此引數,濾鏡將不會作用。
二、 位置問題
大部分的變形,移位問題,主要是支援的原因,這裡不多說了。了解ie6與其他瀏覽器不同之處,找出問題所在,對症下藥。
三、浮動元素無法顯示在select元素之上
問題:如ofbiz選單,在其他瀏覽器可以正常遮蓋住select,但是ie6下,根本遮蓋不住,select會刺穿選單顯示於上層。
原因:據說是ie6的國際性bug.
解決:利用透明的iframe遮蓋住select。
注意:遮蓋成功後,每次請求會彈安全資訊框,很是煩人,解決辦法就是在iframe中引用乙個空頁面
大致的東西就這些,細節的方面就不多說了。本人相容性調整後ie6/7/8/9,ff.完美執行
juck.iteye.com
瀏覽器相容性
瀏覽器相容性是乙個很長久的話題,之所以前端需要面對瀏覽器相容性,是因為使用者的環境有不同的平台,不同的瀏覽器。不同的廠商之間為了相互競爭,對標準的實現不一樣。不同的瀏覽器有不同的核心。即使同乙個瀏覽器也有不同的版本,不同的版本對同一特性的支援情況也不盡相同。也可能某個瀏覽器的某個版本針對某個特性存在...
瀏覽器相容性
所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前,我...
瀏覽器相容性
trident ie核心 gecko firefox 核心 webkit chrome,safari blink webkit 的分支 presto 是挪威產瀏覽器 opera 的 前任 核心,為何說是 前任 因為最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌大本營。移動端的瀏覽器核心主要說...