忽然間靈光一閃! 發現案情不單純!! 立刻檢視 Blogger 的原始碼, 發現了 Blogger 暗藏陷阱. 如果你採用的模組是當年 IE8 向下相容模式, 可能會有這一段：
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
這是避免某些網頁在 IE8 上面的排版錯誤, 額外對 IE 使用者提供 IE7 顯示也可以. 就是這一段陳年老詞, 讓 IE9 擁有五星級的設施; 卻只能享受無星級的服務... var types=[BootstrapDialog.TYPE_DETAIL];$.each(types,function(index,type){BootstrapDialog.show({type:type,title:' Warning',message:' IE9 以後的新版本全中招!',buttons:[{id:'btn-ie',label:' OK',cssClass:'btn-primary',action:function(dialogRef){dialogRef.close()}}]});});
假使你不會採用新式 CSS 標記或元素; 也無需使用 HTML5 的組合技語言, 那麼就放著不管沒關係. 在台灣還有很多舊 IE 版本的使用者. (約占 IE 使用者四成) 又假使你的網站或部落格需要支援 IE8 以上版本, 可是又沒有區分每一版本 IE 所需 CSS/HTML 的架構. 那麼還是直接標記為最高版本才是上策. 將剛才的那一段改成：
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
每當使用 IE 訪客造訪時, 會以他所擁有的最高 IE 版本來開啟頁面. 也就是各安天命, 你的瀏覽器能看到高版本的排版及內容, 就不會顯示低版本的文件模式. 所以自己考慮清楚, 查看自己的瀏覽器版本分佈狀況. 該捨棄的訪客就讓他安息吧~
有一點非常重要!!
<meta content='IE=edge' http-equiv='X-UA-Compatible'/> 必須要緊接在 <head> 的後面, 否則IE9會自作聰明地將前面路過的語意分析後, 決定是否讓你看低版本的相容模式. IE9與 <head> 頭頭之間的愛情果真容不下一粒沙子, 真是個敏感的傢伙.
以上就解決了 html115 - 限定文件模式的問題. 事情尚未結束...
請繼續看你的網頁原始碼(不是範本 xml), 發現了一個在修改 CSS/HTML 時不會顯示在範本裡的插件, 讓 IE9 整個頁面當住的兇手就是它!. (很老的模組應該沒有這一個插件)
<!--[if IE]><script type="text/javascript" src="http://www.blogger.com/static/v1/jsbin/3880842819-ieretrofit.js"></script><![endif]-->
這是 Blogger 為了修正 IE 顯示效果的插件 (Google & BSD 技術提供). (為了 IE, 您也太用心了吧!)
打開 ieretrofit.js 一看...
我說 Google 大哥, 你嘛幫幫忙咧! 2007-2009 的文件, 而且你還用 [if IE] 的陳述, 是認為IE永遠不會進化嗎?! (* [if IE] 解釋為 [IE 全部都適用]) 問題是我要怎麼修改這個內建的插件? (ieretrofit.js依照範本的不同, 編號也不同)
打開版型, 在上端位置找到
<b:include data='blog' name='all-head-content'/>
用以下的程式碼替代：
<meta expr:content='"text/html; charset=" + data:blog.encoding' http-equiv='Content-Type'/> <meta content='true' name='MSSmartTagsPreventParsing'/> <meta content='blogger' name='generator'/> <link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/> <link expr:href='data:blog.url' rel='canonical'/> <link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/> <data:blog.feedLinks/> <b:if cond='data:blog.url == data:blog.homepageUrl'> <link href='http://www.blogger.com/openid-server.g' rel='openid.server'/> </b:if>
假使您的自定義描述(Description)因範本不同而沒有顯示在原始碼裡, 請繼續加入以下這一段. 感謝 +Waterbee Chang 的提示. (這是 Blogger 新加入的自動搜尋優化)
<b:if cond='data:blog.metaDescription != ""'> <meta expr:content='data:blog.metaDescription' name='description'/> </b:if>
然後, 在 <b:skin><![CDATA[ 之前重新安插 ieretrofit.js 文件. (編號務必修改成個人的範本編號)
<!--[if lt IE 7]><script src="http://www.blogger.com/static/v1/jsbin/3880842819-ieretrofit.js"></script><![endif]-->
[if lt IE 7] 解釋為：IE7以及IE7以下版本可識別. 這樣就算滿足大多數的IE版本.
Author Summary
Subject : IE9被Blogger陷害了!
Author : - Dream Talker Updated at: 11:19 AM
Votes : - 5.0 - based on 2015
Blogger以IE9檢視錯誤,造成網頁開啟緩慢.html115除錯方法.
Author : - Dream Talker Updated at: 11:19 AM
Votes : - 5.0 - based on 2015
Blogger以IE9檢視錯誤,造成網頁開啟緩慢.html115除錯方法.
5 Stars - Reviews
To @WFU :
ReplyDelete大感謝您的細心! 我昨晚一定是被瞌睡蟲噬腦了. ^ ^
沒有第二段的問題才好, 等你有需要動用到圓角,陰影,偽元素等等也許就需要吧?
發現第二段的修改可能造成動態連結失效. 修改CSS後需使用重整小模組的功能, 將頭像等資料再度抓回Blogger.
Delete還要補上這個--
ReplyDelete<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
謝謝您的補充, 因為沒有影響描述的顯示(會變成重複的meta), 所以當初沒有再增加這一段描述程式碼. 嗯...也許不同的範本需要這一段, 我再補充在文章裡好了.
Delete您的版型真清新!
IE的CSS問題我想主要不是那個，而是-goog的前綴使然
ReplyDelete用了Google的相容javascript，這語法才會生效
假設把相容模式改成edge，再把-goog拿掉，
IE9以上的版本，有支援的CSS3語法就會正常渲染
感謝您的意見, 我沒有試過可行與否.
Delete不過光是修改edge是沒用的, ieretrofit.js是all-head-content裡面整組的CSS, 最後還是由它主導CSS在IE上呈現的方式(它在IE上有高於edge的強制性). 如不拿掉ieretrofit.js或是用程式碼強制停用它都沒用的.
但是移除js卻又會讓舊版IE讀不懂新式CSS, 最後回歸到[if It IE 7]的修改必要性, 總不能只顧新IE而不管舊IE死活吧? 哈哈!
(噯! 今天老是打錯字)
我測試了去掉-goog前綴的方法，似乎也可行。
Delete多了一項選擇更好了!
Delete