IE9被Blogger陷害了!

9   Comments

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版本.


Author Summary
IE9被Blogger陷害了!
Subject : IE9被Blogger陷害了!
Author : - Dream Talker Updated at: 11:19 AM
Votes : 100% - 5.0 - based on 2015
Blogger以IE9檢視錯誤,造成網頁開啟緩慢.html115除錯方法.
5 Stars - Reviews
留言提示 - Comment Tips
◆ 如果您有任何想法或意見,歡迎參與留言。
◆ Disqus匿名留言,信箱及個人資訊不會公開顯示。
◆ 請多使用社群帳號留言,可簡化流程並訂閱回復。
◆ 『私密留言』請使用Google+分享按鍵,留言須使用『@Mark X』在訊息中,以免遺漏通知。
◆ G+ 訊息中指名分享對象的參考文件: 『 說明
  • Disqus
  • Blogger
  • Facebook
Anonymous left your nick please
  1. 雖然自己不用 IE,但為了龐大的 IE 使用群...的確必須改第一段的語法;
    而第二段的語法,(幸好?)小弟的範本太舊了,所以找不到..XD

    另外,第一段語法複製到範本時發現系統不給存,原來 meta 標籤的尾巴要加個 "/",所以請 DT 大修改一下第一段語法為:
    <meta content='IE=edge' http-equiv='X-UA-Compatible'/>

    ReplyDelete
  2. To @WFU :
    大感謝您的細心! 我昨晚一定是被瞌睡蟲噬腦了. ^ ^
    沒有第二段的問題才好, 等你有需要動用到圓角,陰影,偽元素等等也許就需要吧?

    ReplyDelete
    Replies
    1. 發現第二段的修改可能造成動態連結失效. 修改CSS後需使用重整小模組的功能, 將頭像等資料再度抓回Blogger.

      Delete
  3. 還要補上這個--
    <b:if cond='data:blog.metaDescription != ""'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
    </b:if>

    ReplyDelete
    Replies
    1. 謝謝您的補充, 因為沒有影響描述的顯示(會變成重複的meta), 所以當初沒有再增加這一段描述程式碼. 嗯...也許不同的範本需要這一段, 我再補充在文章裡好了.
      您的版型真清新!

      Delete
  4. IE的CSS問題我想主要不是那個,而是-goog的前綴使然
    用了Google的相容javascript,這語法才會生效

    假設把相容模式改成edge,再把-goog拿掉,
    IE9以上的版本,有支援的CSS3語法就會正常渲染

    ReplyDelete
    Replies
    1. 感謝您的意見, 我沒有試過可行與否.
      不過光是修改edge是沒用的, ieretrofit.js是all-head-content裡面整組的CSS, 最後還是由它主導CSS在IE上呈現的方式(它在IE上有高於edge的強制性). 如不拿掉ieretrofit.js或是用程式碼強制停用它都沒用的.
      但是移除js卻又會讓舊版IE讀不懂新式CSS, 最後回歸到[if It IE 7]的修改必要性, 總不能只顧新IE而不管舊IE死活吧? 哈哈!
      (噯! 今天老是打錯字)

      Delete
    2. 我測試了去掉-goog前綴的方法,似乎也可行。

      Delete
    3. 多了一項選擇更好了!

      Delete