POSTS
IE中打開UTF-8編碼title為中文的網頁會顯示空白頁的問題
(忘了引用來源)
很久很久以前(大概2005年10月 ~2006年3月)，當時在blogger.com寫Blog。當時blogger.com有中文界面，對中文用戶也算是比較關心了，不過 blogger.com的所有模版裡都有一個問題，那就是
標籤被放在<meta>標籤前面。當title為中文的 時(比如Blog名為中文或者文章標題為中文)，在IE下會出現顯示空白頁的問題。昨天<a href="http://dre-j.blogspot.com/">Dre·J</a>在群裡又問到這個問題，今天過來好好研究一下。</p>
<p>這個問題只存在於blogger.com中，WordPress系統中不存在。先說一下在blogger.com中這個問題的解決辦法：在模版的<body>標籤下面找到<title>標籤，調整成這樣：</p>
<pre><code><$BlogMetaData$>
<title><$BlogPageTitle$></title>
</code></pre>
<p>保證meta在前面就可以了。可以參考<a href="http://panya.cn/?p=40">《感謝Yskin》</a>和<a href="http://www.matrix.org.cn/blog/someok/archives/001465.html">《UTF-8字符集網頁在IE上會顯示空白問題的解決方案》</a>。</p>
<p>這個問題要從瀏覽器解析html的方式講起。瀏覽器讀取了頁面的html代碼後開始進行解析。解析前瀏覽器要先知道頁面的編碼方式，然後根據編碼方 式進行解碼，然後才能開始解析。我大概想了一下，瀏覽器可以從下面3個方面得到頁面編碼方式：HTTP Header中的”Content-Type”項、返回的html代碼開頭是否有BOM、html代碼中的meta標籤。</p>
<p>做了一個小測試，使用Windows 2000 SP4操作系統，IE6 SP1和Firefox 1.5.0.5瀏覽器。所有文件使用DOS格式換行符。測試代碼如下：</p>
<pre><code><?php
header("Content-Type: text/html; charset=utf-8");
?><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>你好啊</title>
</head>
<body>
你好啊。
</body>
</code></pre>
<p>先 不要前面的PHP語句，直接使用html文件，分無meta、meta在title前、meta在title後3種方式，分別做成GBK、UTF -8(no BOM)、UTF-8(BOM)三種編碼方式的文件，再分別用IE和Firefox測試。我的Blog所在的服務器上，訪問html文件時HTTP Header裡Content-Type是<code>Content-Type: text/html</code>。第二遍測試加上PHP語句，用Header函數給HTTP Header中加上<code>Content-Type: text/html; charset=utf-8</code>，再把第一遍做的重新做一遍。<br />
IE6 SP1 Firefox 1.5.0.5 字節 地址 無meta meta在前 meta在後 —加了Header語句後— 無meta meta在前 meta在後</p>
<table border="1">
<tr>
<td>
GBK
</td>
<td>
正常
</td>
<td>
正常
</td>
<td>
73
</td>
<td>
<a href="http://yskin.net/wp-content/uploads/ie-utf-8-bug/t11.html" target="_blank">t11.html</a>
</td>
</tr>
<tr>
<td>
UTF-8(no BOM)
</td>
<td>
空白頁
</td>
<td>
使用GBK解碼形成亂碼
</td>
<td>
80
</td>
<td>
<a href="http://yskin.net/wp-content/uploads/ie-utf-8-bug/t12.html" target="_blank">t12.html</a>
</td>
</tr>
<tr>
<td>
UTF-8(BOM)
</td>
<td>
正常
</td>
<td>
正常
</td>
<td>
83
</td>
<td>
<a href="http://yskin.net/wp-content/uploads/ie-utf-8-bug/t13.html" target="_blank">t13.html</a>
</td>
</tr>
<tr>
<td>
GBK
</td>
<td>
使用UTF-8解碼形成亂碼
</td>
<td>
使用UTF-8解碼形成亂碼
</td>
<td>
144
</td>
<td>
<a href="http://yskin.net/wp-content/uploads/ie-utf-8-bug/t21.html" target="_blank">t21.html</a>
</td>
</tr>
<tr>
<td>
UTF-8(no BOM)
</td>
<td>
正常
</td>
<td>
正常
</td>
<td>
151
</td>
<td>
<a href="http://yskin.net/wp-content/uploads/ie-utf-8-bug/t22.html" target="_blank">t22.html</a>
</td>
</tr>
<tr>
<td>
UTF-8(BOM)
</td>
<td>
正常
</td>
<td>
正常
</td>
<td>
154
</td>
<td>
<a href="http://yskin.net/wp-content/uploads/ie-utf-8-bug/t23.html" target="_blank">t23.html</a>
</td>
</tr>
<tr>
<td>
GBK
</td>
<td>
使用UTF-8解碼形成亂碼
</td>
<td>
使用UTF-8解碼形成亂碼
</td>
<td>
144
</td>
<td>
<a href="http://yskin.net/wp-content/uploads/ie-utf-8-bug/t31.html" target="_blank">t31.html</a>
</td>
</tr>
<tr>
<td>
UTF-8(no BOM)
</td>
<td>
空白頁
</td>
<td>
正常
</td>
<td>
151
</td>
<td>
<a href="http://yskin.net/wp-content/uploads/ie-utf-8-bug/t32.html" target="_blank">t32.html</a>
</td>
</tr>
<tr>
<td>
UTF-8(BOM)
</td>
<td>
正常
</td>
<td>
正常
</td>
<td>
154
</td>
<td>
<a href="http://yskin.net/wp-content/uploads/ie-utf-8-bug/t33.html" target="_blank">t33.html</a>
</td>
</tr>
<tr>
<td>
GBK
</td>
<td>
使用UTF-8解碼形成亂碼
</td>
<td>
使用UTF-8解碼形成亂碼
</td>
<td>
133
</td>
<td>
<a href="http://yskin.net/wp-content/uploads/ie-utf-8-bug/t11.php" target="_blank">t11.php</a>
</td>
</tr>
<tr>
<td>
UTF-8(no BOM)
</td>
<td>
正常
</td>
<td>
正常
</td>
<td>
140
</td>
<td>
<a href="http://yskin.net/wp-content/uploads/ie-utf-8-bug/t12.php" target="_blank">t12.php</a>
</td>
</tr>
<tr>
<td>
UTF-8(BOM)
</td>
<td>
正常
</td>
<td>
正常
</td>
<td>
143
</td>
<td>
<a href="http://yskin.net/wp-content/uploads/ie-utf-8-bug/t13.php" target="_blank">t13.php</a>
</td>
</tr>
<tr>
<td>
GBK
</td>
<td>
使用UTF-8解碼形成亂碼
</td>
<td>
使用UTF-8解碼形成亂碼
</td>
<td>
204
</td>
<td>
<a href="http://yskin.net/wp-content/uploads/ie-utf-8-bug/t21.php" target="_blank">t21.php</a>
</td>
</tr>
<tr>
<td>
UTF-8(no BOM)
</td>
<td>
正常
</td>
<td>
正常
</td>
<td>
211
</td>
<td>
<a href="http://yskin.net/wp-content/uploads/ie-utf-8-bug/t22.php" target="_blank">t22.php</a>
</td>
</tr>
<tr>
<td>
UTF-8(BOM)
</td>
<td>
正常
</td>
<td>
正常
</td>
<td>
214
</td>
<td>
<a href="http://yskin.net/wp-content/uploads/ie-utf-8-bug/t23.php" target="_blank">t23.php</a>
</td>
</tr>
<tr>
<td>
GBK
</td>
<td>
使用UTF-8解碼形成亂碼
</td>
<td>
使用UTF-8解碼形成亂碼
</td>
<td>
204
</td>
<td>
<a href="http://yskin.net/wp-content/uploads/ie-utf-8-bug/t31.php" target="_blank">t31.php</a>
</td>
</tr>
<tr>
<td>
UTF-8(no BOM)
</td>
<td>
正常
</td>
<td>
正常
</td>
<td>
211
</td>
<td>
<a href="http://yskin.net/wp-content/uploads/ie-utf-8-bug/t32.php" target="_blank">t32.php</a>
</td>
</tr>
<tr>
<td>
UTF-8(BOM)
</td>
<td>
正常
</td>
<td>
正常
</td>
<td>
214
</td>
<td>
<a href="http://yskin.net/wp-content/uploads/ie-utf-8-bug/t33.php" target="_blank">t33.php</a>
</td>
</tr>
</table>
<p>文件中有6個漢字和一個漢字句號，所以UTF-8(no BOM)格式比GBK格式多出7個字節。UTF-8的BOM佔用3個字節，所以UTF-8(BOM)比UTF-8(no BOM)多出3個字節。經驗證，所有數據都符合這個規則，所以各文件格式沒有錯誤。</p>
<p>PHP不支持BOM，又因為BOM的3個字符在最前面，顯示不包含在<?php…?>標籤裡，所以PHP引擎會3個字符輸出，於是 輸出的html文件也有了BOM。所以這次測試中，為了修改http header而加入的PHP語句不影響最終輸出的html文件的BOM。</p>
<p>從測試結果可以看出，瀏覽器(無論是IE還是Firefox)在解析頁面時，首先取HTTP Header中的Content-Type項，如果有寫明charset的話就認定頁面的編碼方式為charset指定的值。如果沒有指明，則認定為默認 值。根據上表，IE中文版的默認值是GB2312，Firefox中文版的默認值是GBK，不過IE的GB2312好像和GBK沒啥區別。然後，瀏覽器會 看一下有沒有BOM。一旦發現有UTF-8的3字節BOM，則重新認定頁面的編碼方式為UTF-8。</p>
<p>然後是解碼階段，解碼完成後是解析html的階段。解析html的過程中，當解析到head部分的meta標籤時，瀏覽器會根據<code><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></code>這個語句中的說明，重新認定編碼方式為charset後面的方式，中斷html解析過程，返回到解碼步驟重新解碼。</p>
<p>知道了這個步驟，再來看這個表：在加了Header語句設置了HTTP Header後，兩個瀏覽器解析所有頁面都是用的UTF-8方式，包括GBK編碼的頁面。(當然要正常解析GBK編碼的文件，可以在title前加上個 meta標籤標明編碼方式。)在上表的下半部分可以清楚的看到這一點。再來看上半部分，在沒有加Header語句的頁面裡，首先瀏覽器認定頁面編碼方式為 默認值GBK。檢測有無UTF-8的3字節BOM，檢測到的，認定頁面編碼方式為UTF-8，解碼再解析html，一切正常。如上表所示，上半部分帶 BOM的頁面都能正常顯示。如果沒有BOM，頁面可能是GBK或者UTF-8(no BOM)格式，瀏覽器會先按照默認的GBK方式開始解碼。頁面為GBK格式時，無meta時正常，有meta時瀏覽器解析到meta標籤會回頭重現按 UTF-8方式解碼，所以GBK,meta在前或後，無論IE還是FF都是亂碼。再看UTF-8(no BOM)的頁面，無meta時FF用GBK方式解碼下去，最終顯示亂碼，IE則解碼出錯，形成空白頁。有meta時，Firefox找到meta後回頭重 新按UTF-8方式解碼，所以無論meta在前或在後都是正常；IE則是在meta在前時能夠和Firefox一樣回頭重新解碼，當meta在後時，又是 解析到title出錯，返回空白頁。</p>
<p>所以，IE顯示空白頁的問題，很明顯是因為IE的解碼程序兼容性差。上網查了下，GBK的編碼範圍是0×8140-0xfefe。從GB2312- 80開始，因為ASCII碼的範圍是0~127，首字位是0，所以GB2312-80使用雙字節，並設置首字位為1。「GBK 亦採用雙字節表示，總體編碼範圍為 8140-FEFE，首字節在 81-FE 之間，尾字節在 40-FE 之間。」[<a href="http://www.haiyan.com/steelk/navigator/ref/gbk/gbindex.htm">via</a>]UTF-8中中文都是3個字節的，由於Unicode中中日韓的文字都混在一起，可以使用Windows自帶的字符映射表查看CJK表意字符的範圍，即為漢字的範圍。(可以參考我的<a href="http://yskin.net/2006/06/word-count.html">這篇文章</a>裡的圖片)3字節的UTF-8編碼是這樣子的：1110xxxx 10xxxxxx 10xxxxxx，編碼範圍是8000-EFFF，首字節在80-EF之間，尾字節在00-FF之間。[<a href="http://www.linuxfans.org/nuke/modules.php?name=News&file=article&op=view&sid=1749">via</a>] 顯然當一段UTF-8編碼的文本被按照GBK方式解碼的時候，由於有一些編碼在GBK中不存在，造成解碼程序出現錯誤。當UTF-8文本被按照GBK的方 式解碼的時候，前兩個字節會被認為是一個字，後一個字節將和下一個字符結合。當<title>標籤裡的漢字數是偶數個時，勉強有3/4的概率 通過解碼程序(因為GBK的第二個字節要求是40-FE)，當有奇數個漢字的時候，最後一個漢字的三個字節的最後一個字節會和< /title>的第一個字符<結合，而<的編碼是3C，正好不在尾字節40-FE的範圍中，造成錯誤。如果< /title>標籤前有多餘的空格也會產生錯誤，因為空格的編碼20也不在範圍中。</p>
<p>再做一個測試，修改t12.html中title的部分，修改成兩個漢字，再用IE打開發現不再是空白頁，而是用GBK編碼導致的亂碼頁面了。地址：<a href="http://yskin.net/wp-content/uploads/ie-utf-8-bug/s.html" target="_blank">s.html</a></p>
<p>所以，空白頁的出現是不固定的。<a href="http://www.matrix.org.cn/blog/someok/archives/001465.html">《UTF-8字符集網頁在IE上會顯示空白問題的解決方案》</a>所說的「IE 解析網頁編碼時是 HTML 內的標識優先的，然後是 HTTP header ；而mozilla 系列的瀏覽器剛剛好相反。」是不對的。在網上搜索「meta的作用」，很容易就可以找到一堆meta標籤的說明。比如<a href="https://blog.cnetnews.com.cn/kunalice/shehui/2127/">《HTML中meta的作用》</a>裡 提到：「meta是用來在HTML文檔中模擬HTTP協議的響應頭報文。」在meta標籤中寫和在HTTP頭裡寫是一樣的，這也是為瞭解決用普通HTML 寫網頁的人無法自行定義HTTP頭的問題。但是，meta是一個html標籤，所以必須進入到html解析的步驟才能生效，而生效後，瀏覽器會退回幾步， 重新設置好HTTP頭從頭再開始解碼、解析html。所以meta中寫的內容會覆蓋HTTP頭裡的內容，無論哪個瀏覽器都是這樣的。如果像他所說的， mozilla系列瀏覽器是HTTP Header優先於HTML內的標識，那meta標籤不就等於沒有用了嗎？這不符合html標準。</p>
<p>而<a href="http://my.opera.com/tifa/blog/show.dml/257087">《一個 utf-8 網頁在 IE6 下的BUG》</a>中 所說的出現空白頁必須的3項條件(1.title標籤裡的內容為中文其他雙字節字符；2.指定網頁編碼的 meta 信息在 title 標籤的下方；3.另存或轉換utf-8編碼時沒有包括 unicode 簽名 (BOM))基本上正確，不過不夠全面，具體的原因我上面已經詳細分析過了。還有BOM不能算簽名吧，唉，就叫他BOM好了，Byte Order Mark，字節序標識，用於UTF-16編碼的文件，在UTF-8編碼的文件中不需要標識字節序，所以被用來標識這是一個UTF-8編碼文件。</p>
<p>這個問題還是IE的兼容性問題，在解碼的時候如果遇到錯誤的編碼就中斷解碼。畢竟html代碼是從網絡上傳輸過來的，很可能傳錯幾個字節，所以解碼 程序不必弄的這麼嚴格吧。亂碼頁面起碼讓瀏覽者知道網頁已經打開，有點經驗的會知道切換網頁編碼，如果是空白頁很可能被瀏覽者認為是網頁本身就是空白的， 從而放棄瀏覽。IE在html解析和CSS解析上容錯性很好的呀，怎麼解碼這塊會做的這麼嚴格呢。某些天天喊叫IE兼容性好，IE能正常瀏覽的網頁多的 人，你看這個，這個，嘿嘿。</p>
<p>測試了一下，blogspot,sitesled,Blogger Spaces上的頁面都是返回的<code>Content-Type: text/html</code>，所以他們都會出現空白頁的問題。好像Apache默認情況下不會亂聲明編碼方式的，無論是國外的主機還是國內的主機。我的Blog的頁面的HTTP Header都包含<code>Content-Type: text/html; charset=UTF-8</code>， 後台的頁面也都有，一般不會有問題。比較奇怪的是，我查了WordPress和K2所有的文件，也沒發現哪兒用Header命令設置過這個HTTP頭。一 些輸出RSS和atom或者是發送trackback的文件都很仔細的用Header命令設置這個HTTP頭，不過不存在一個地方用了Header命令從 而一勞永逸地使所有輸出的頁面都包含這個頭的。難道Apache在處理PHP文件的時候會自動檢測文件的編碼方式並設置HTTP頭嗎？WordPress 自帶的WordPress Default和WordPress Classic模版都把``單獨放在title標籤的前面，可能WordPress開發組注意到了這個問題，K2模版則沒有注意這個問題。blogger.com的模版也沒有注意這個問題，難道老外都習慣了meta一起放在title下面？</p>
<p>另外，這個是IE的bug，不過也不要認為你用的是MyIE、MyIE2、遨遊Maxthon、GreenBrowser、騰訊TT就不會受到影響，他們都是以IE為核心的，IE的bug他們一個個都跑不掉。儘早投降吧，投到Firefox或者Opera的懷抱裡來吧。</p>
<div class="wp_plus_one_button" style="margin: 0 8px 8px 0; float:left; ">
<g:plusone href="https://blog.sd.idv.tw/archives/31" callback="wp_plus_one_handler"></g:plusone>
</div>
<ul class="pa0">
<li class="list">
<a href="https://blog.sd.idv.tw/tags/php" class="link f5 grow no-underline br-pill ba ph3 pv2 mb2 dib black sans-serif">PHP</a>
</li>
</ul>
<div class="mt6">
<div id="disqus_thread"></div>
<script type="application/javascript">
var disqus_config = function () {
};
(function() {
if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.';
return;
}
var d = document, s = d.createElement('script'); s.async = true;
s.src = '//' + "sdpower" + '.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
</section>
<aside class="w-30-l mt6-l">
<div class="bg-light-gray pa3 nested-list-reset nested-copy-line-height nested-links">
<p class="f5 b mb3"></p>
<ul class="pa0 list">
<li class="mb2">
<a href="https://blog.sd.idv.tw/archives/30/">注音 漢語拼音 preg_split 正規劃切割</a>
</li>
<li class="mb2">
<a href="https://blog.sd.idv.tw/archives/29/">利用imagemagick來作縮圖</a>
</li>
<li class="mb2">
<a href="https://blog.sd.idv.tw/archives/27/">亂數取碼當成驗證碼的問題</a>
</li>
<li class="mb2">
<a href="https://blog.sd.idv.tw/archives/26/">如何秀出複數的排序條件資料</a>
</li>
<li class="mb2">
<a href="https://blog.sd.idv.tw/archives/25/">PHP GooGle PageRank程式</a>
</li>
<li class="mb2">
<a href="https://blog.sd.idv.tw/archives/15/">非mmcache！Memcached的應用：多網站伺服器 PHP 共享 Session</a>
</li>
<li class="mb2">
<a href="https://blog.sd.idv.tw/archives/7/">FreeBSD 使用PHP 透過FTP連線拋檔 備份</a>
</li>
</ul>
</div>
</aside>
</article>
</main>
<footer class="bg-black bottom-0 w-100 pa3" role="contentinfo">
<div class="flex justify-between">
<a class="f4 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="https://blog.sd.idv.tw/" >
© 2022 SDpower
</a>
<div>
<a href="https://twitter.com/SDpower_tw" target="_blank" class="link-transition twitter link dib z-999 pt3 pt0-l mr1" title="Twitter link" rel="noopener" aria-label="follow on Twitter——Opens in a new window">
<svg height="32px" style="enable-background:new 0 0 67 67;" version="1.1" viewBox="0 0 67 67" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M37.167,22.283c-2.619,0.953-4.274,3.411-4.086,6.101 l0.063,1.038l-1.048-0.127c-3.813-0.487-7.145-2.139-9.974-4.915l-1.383-1.377l-0.356,1.017c-0.754,2.267-0.272,4.661,1.299,6.271 c0.838,0.89,0.649,1.017-0.796,0.487c-0.503-0.169-0.943-0.296-0.985-0.233c-0.146,0.149,0.356,2.076,0.754,2.839 c0.545,1.06,1.655,2.097,2.871,2.712l1.027,0.487l-1.215,0.021c-1.173,0-1.215,0.021-1.089,0.467 c0.419,1.377,2.074,2.839,3.918,3.475l1.299,0.444l-1.131,0.678c-1.676,0.976-3.646,1.526-5.616,1.568 C19.775,43.256,19,43.341,19,43.405c0,0.211,2.557,1.397,4.044,1.864c4.463,1.377,9.765,0.783,13.746-1.568 c2.829-1.673,5.657-5,6.978-8.221c0.713-1.716,1.425-4.851,1.425-6.354c0-0.975,0.063-1.102,1.236-2.267 c0.692-0.678,1.341-1.419,1.467-1.631c0.21-0.403,0.188-0.403-0.88-0.043c-1.781,0.636-2.033,0.551-1.152-0.402 c0.649-0.678,1.425-1.907,1.425-2.267c0-0.063-0.314,0.042-0.671,0.233c-0.377,0.212-1.215,0.53-1.844,0.72l-1.131,0.361l-1.027-0.7 c-0.566-0.381-1.361-0.805-1.781-0.932C39.766,21.902,38.131,21.944,37.167,22.283z M33,64C16.432,64,3,50.569,3,34S16.432,4,33,4 s30,13.431,30,30S49.568,64,33,64z" style="fill-rule:evenodd;clip-rule:evenodd;fill:;"/></svg>
<span class="new-window"><svg height="8px" style="enable-background:new 0 0 1000 1000;" version="1.1" viewBox="0 0 1000 1000" width="8px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<path d="M598 128h298v298h-86v-152l-418 418-60-60 418-418h-152v-86zM810 810v-298h86v298c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h298v86h-298v596h596z" style="fill-rule:evenodd;clip-rule:evenodd;fill:;"/>
</svg>
</span></a>
<a href="https://github.com/SDpower" target="_blank" class="link-transition github link dib z-999 pt3 pt0-l mr1" title="Github link" rel="noopener" aria-label="follow on Github——Opens in a new window">
<svg height="32px" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<path d="M256,32C132.3,32,32,134.8,32,261.7c0,101.5,64.2,187.5,153.2,217.9c11.2,2.1,15.3-5,15.3-11.1 c0-5.5-0.2-19.9-0.3-39.1c-62.3,13.9-75.5-30.8-75.5-30.8c-10.2-26.5-24.9-33.6-24.9-33.6c-20.3-14.3,1.5-14,1.5-14 c22.5,1.6,34.3,23.7,34.3,23.7c20,35.1,52.4,25,65.2,19.1c2-14.8,7.8-25,14.2-30.7c-49.7-5.8-102-25.5-102-113.5 c0-25.1,8.7-45.6,23-61.6c-2.3-5.8-10-29.2,2.2-60.8c0,0,18.8-6.2,61.6,23.5c17.9-5.1,37-7.6,56.1-7.7c19,0.1,38.2,2.6,56.1,7.7 c42.8-29.7,61.5-23.5,61.5-23.5c12.2,31.6,4.5,55,2.2,60.8c14.3,16.1,23,36.6,23,61.6c0,88.2-52.4,107.6-102.3,113.3 c8,7.1,15.2,21.1,15.2,42.5c0,30.7-0.3,55.5-0.3,63c0,6.1,4,13.3,15.4,11C415.9,449.1,480,363.1,480,261.7 C480,134.8,379.7,32,256,32z"/>
</svg>
<span class="new-window"><svg height="8px" style="enable-background:new 0 0 1000 1000;" version="1.1" viewBox="0 0 1000 1000" width="8px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<path d="M598 128h298v298h-86v-152l-418 418-60-60 418-418h-152v-86zM810 810v-298h86v298c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h298v86h-298v596h596z" style="fill-rule:evenodd;clip-rule:evenodd;fill:;"/>
</svg>
</span></a>
</div>
</div>
</footer>
<script src="https://blog.sd.idv.tw/dist/js/app.3fc0f988d21662902933.js"></script>
</body>
</html>