1. 程式人生 > >本地網頁樣式上傳伺服器後發生變化解決辦法

本地網頁樣式上傳伺服器後發生變化解決辦法

這段時間給公司做了個網站,在本地用IE10,火狐,goolgeChrome,360瀏覽器通過頁面樣式測試。

本地通過測試後便上傳到伺服器,上傳之後用IE10瀏覽發現有部份樣式異常。火狐,goolgeChrome,360瀏覽與本地瀏覽樣式效果一樣。

    和平時一樣,有問題找度娘。大部分網友說:編碼問題,也有說樣式沒有載入更有說是快取問題···,我用文字編輯器notepad++檢視CSS檔案發現ANSI格式,難道真是編碼格式問題?立馬改成UTF-8儲存並上傳至伺服器。

    測試結果讓並沒有發生改變,看來不是編碼問題。本地測試正常遠端伺服器上卻異常,難不成是伺服器環境的問題?自己馬上搭建IIS,本地伺服器環境很好就OK了,接著測試瀏覽結果都很正常。開始懷疑空間商的伺服器環境了,因為我用的windows平臺,空間商的是linux平臺。難不我再搭建個linux平臺再測試?

    靜下心來想了想,其它瀏覽器都沒問題就IE有問題,是不是應該在IE上找找問題呢?開啟IE再次瀏覽遠端伺服器的網頁,按下F12鍵打開發人員工具,忽然間我發現瀏覽器模式:IE10,文件模式:IE7。

    這裡顯然有問題,把文件模式改成標準。IE10頁面馬上發生變化與之前本地測試完全一樣。至此問題原因以經找到。本地與遠端伺服器不一致的樣式是因為IE10文件編碼發生了變化。找到問題原因,便進入問題解決方案。

    解決方法在網頁加入<meta http-equiv="X-UA-Compatible" content="IE=edge" >程式碼。X-UA-Compatible是針對 IE8 以上版本的一個特殊檔案頭標記,用於為 IE8 以上版本指定不同的頁面渲

染模式,對於ie8之下的版本瀏覽器是不識別的。

在X-UA-Compatible中可用的方法有:

<meta http-equiv="X-UA-Compatible" content="IE=5" >

<meta http-equiv="X-UA-Compatible" content="IE=7" >

<meta http-equiv="X-UA-Compatible" content="IE=8" >

<meta http-equiv="X-UA-Compatible" content="IE=edge" >

其中最後一行是Edge 模式,通知 Windows Internet Explorer 以最高級別的可用模式顯示內容。

雖然這個問題已經解決,但最終暴露出另外兩個問題 。

1、為什麼我在本地搭建的IIS伺服器,IE瀏覽文件模式是正常標準。而上傳卻變成了IE7?

2、說明CSS檔案相容性不是很完美在IE7或以下會發生異常。