解決webp格式相容性問題

webp格式的非常屌，見文章：

可是，它有相容性問題，目前我發現只有基於webkit核心的瀏覽器才支援，如果ie核心的瀏覽器開啟，根本不會顯示webp格式的。

那麼如何解決這個問題呢？

function checkwebp() catch(err) 

}$(document).ready(function() 
var original = $(this).attr('original');//針對用了懶載入的情況
if(typeof original != 
'undefined') })}
但是，這種方案有兩個問題：
1）ie下頁面首先會顯示一張破圖，然後再顯示成正確的圖，體驗效果不好
2）ie下雖然講webp替換成了jpg，但是看網路請求可以發現，其實頁面請求了兩次，先請求了webp，再請求了jpg，反而浪費了寬頻
果斷拋棄這種方案。
方案二，根據header資訊判斷瀏覽器是否支援webp
accept頭資訊會告知瀏覽器能夠識別哪些型別的檔案，如下
檢視google的accept：
檢視ie的accept：
可以知道，google瀏覽器是支援webp的，ie不支援。
所以，可以在伺服器端通過判斷是否支援webp來顯示對應的。
function 
get_thumb($url, $type 
= '', $width 
= 0, $height 
= 0, $format 
= 'webp')
if(empty($width) && empty($height) && empty($type))  else 
}return 
$url;
}

解決相容性問題

解決相容性的方法 1.清除浮動的相容性 清除浮動在低版本瀏覽器不可以使用，需要處理相容性加乙個 2.rgb 和rgba和opacity的相容性 rgb 和 opacity在ie低版本中不支援，需要加乙個filter alpha opacity 50 3.解決css3中的相容性 chrome 谷歌 的...

piczoom相容性問題 相容性問題

1.文字本身的大小不相容。同樣是font size 14px的宋體文字，在不同瀏覽器下佔的空間是不一樣的，ie下實際佔高16px，下留白3px，ff 下實際佔高17px，上留白1px，下留白3px，opera下就更不一樣了。解決方案 給文字設定 line height 確保所有文字都有預設的 lin...

相容性問題

原文 1.ie浮動 margin 產生的雙倍距離 box 2.display inline block ie6，7下不相容 用float left 3.position fixed ie6不支援 ie6下用position和js模擬，或者完全不用，用position和js模擬 4.cursor ha...