Tool Pages

IE9被Blogger陷害了!

Blogger bug in IE9
昨天對 IE9 執行 HTML5 網頁的方式有些失望. 後來想想.. 微軟這麼多頂尖工程師, 怎麼可能設計一個比 IE8 還要差的瀏覽器?! 雖然我很少使用 IE; 但還是該秉持中肯的觀察, 這其中應該有甚麼環節出錯了?
忽然間靈光一閃! 發現案情不單純!! 立刻檢視 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='&quot;text/html; charset=&quot; + data:blog.encoding' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' 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版本.