1. 程式人生 > >關於IE瀏覽器的兼容性問題

關於IE瀏覽器的兼容性問題

得到 png logs 就是 img 統一 gte 屏幕大小 str

這周老師教了我們關於瀏覽器兼容性問題,如何讓不同的瀏覽器兼容也是我們程序師要為客戶解決的問題,
無論用戶用什麽瀏覽器來查看我們的網站或者登陸我們的系統,都應該是統一的顯示效果。

瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補丁和內補丁不同

問題癥狀:隨便寫幾個標簽,不加樣式控制的情況下,各自的margin 和padding差異較大。

碰到頻率:100%

解決方案:

技術分享

備註:這個是最常見的也是最易解決的一個瀏覽器兼容性問題,幾乎所有的CSS文件開頭都會用通配符*來設置各個標簽的內外補丁是0。

在最開始做網頁中我們也會用到設置布局的方式來適應不同的屏幕大小的兼容,適應臺式電腦、筆記本電腦、各種手機、平板。

我們會用到如下的方式

技術分享

有時候我們網頁做出來的效果會把一行擠到下一行去,沒有那麽的大身子卻占用一大塊空間,我們常用div標簽,而div標簽就是一個典型的塊屬性標簽它把一行占滿,其他的就移動不上去,我們就會用到 display:inline;將其轉化為行內屬性:

技術分享

現在我們還學了css hack 的原理,由於不同的瀏覽器和瀏覽器各版本對CSS的支持及解析結果不一樣,以及CSS優先級對瀏覽器展現效果的影響,我們可以據此針對不同的瀏覽器情景來應用不同的CSS。學習了這個之後,原來各版本不同的瀏覽器顯示不同,讓我找到了問題所在,讓我稍稍了解了怎麽去適應瀏覽器展現效果的問題

通過 IE 的條件註釋 來完成條件註釋:

與html註釋相似<!-- --> if條件判斷是否能夠解析註釋裏的內容

gt : 選擇條件版本以上的版本(不包含條件版本) gt ie 7

lt : 選擇條件版本以下的版本(不包含條件版本) lt ie 8

gte :選擇條件版本以及以上版本 gte ie 7

lte : ! :選擇條件版本意外的所有版本 ! ie6

技術分享

我們通過實踐得到

* 或 # ,IE7、IE11 支持。
\9 ,IE8、IE9、IE11 支持。
\0 ,IE8、IE9 IE10 支持。
*、#、\9、\0 這幾個寫法除了IE外其他瀏覽器均不支持。

關於IE瀏覽器的兼容性問題