Change History

同學你好：

我注意到你的網頁裡面使用了非常多的進階語法，而且裡面有許多 CSS3 的語法。CSS3 的語法的好處是很好用而且功能很強，但缺點就是其實最多人使用的瀏覽器以及版本(IE6~IE8)基本上是不支援的。所以，你可以找一個 IE8 的瀏覽器看一看你的網頁，你可以發現有幾個地方有很大的不一樣。

嗯，我想我直接作個截圖好了：

左邊的是 Chrome14 的效果，右邊的是 IE8。

<img src="http://mepopedia.com/forum/file.php?855,file=287,filename=Chrome14-2011-10-17_031937.gif" width=400/>　<img src="http://mepopedia.com/forum/file.php?855,file=286,filename=IE8-2011-10-17_031623.gif" width=400/>


細節就不提了。我想最明顯的差異主要是「#header 背景圖的大小」和「#content 背景透明度」（在IE中背景沒有任何透明度）。

其實這二個問題不好解，我現在也沒什麼時間幫你試。我大致和你提我的看法與建議。

1. 背景圖的大小 (background-size)

「background-size」是 CSS3 才有的進階語法。在<a href=http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx#color>這個網頁</a>你找一下可以看到，background-size 一直到 IE9 才支援，目前最多人用的 IE8 (和之前的IE版本) 都沒有。因為沒有支援，所以就會看到目前這樣很大的差異（不過我其實覺得也滿有意思的，一般人應該不會覺得有問題）。
「background-size」是 CSS3 才有的進階語法。在<a href=http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx#color>這個網頁</a>你找一下可以看到，background-size 一直到 IE9 才支援，目前最多人用的 IE8 (和之前的IE版本) 都沒有。因為沒有支援，所以就會看到目前這樣很大的差異（不過我覺得其實目前IE8的這個樣子也滿有意思的，一般人應該不會覺得有問題）。

我建議可以試著把背景拿出來放到 #header 裡面用 &lt;img> 裡面再加個 align=right 的方式去寫。要微調位置的話再加些 margin-top 或 margin-left 就可以了。不過我沒有試，也不確定效果怎麼樣。要特別注意的是，我的經驗是 &lt;img> 要寫在 &lt;h1> 之前，這樣圖片才會置右，不然就會等 &lt;h1> 的標題文字都寫完了才會出現圖片。

我寫個示意原始碼好了（不過不保證有效果）：
<xmp><div id="header">
<img align="right" src="網址" width="270"/>
<h1>銀魂</h1>
空知英秋的少年漫畫作品，在《週刊少年Jump》2004年2號開始連載。
</div></xmp>

2. 背景透明度（opacity）

這邊你也用了非常高段語法「rgba」顏色設定：把原本的設定顏色的語法 #fffff，改為在最後一個參數為設定透明度而比較進階的 rgba(255%, 255%, 255%, 0.9)。不過一樣，IE8 也是不支援。讓 IE 支援的方式是在 CSS 中加上 <b>filter:alpha(opacity=90);</b>。如果不透明度設為 0.9，在opacity就要寫90。

所以跨瀏覽的相容性寫法大致是這樣：
<pre>#content{
background: rgba(255%, 255%, 255%, 0.9);
filter:alpha(opacity=90);
......(其他css屬性)
}</pre>

不過這樣的話，你會發現不僅背景顏色有透明效果，連「文字」也會跟著「透明」起來。我不確定怎麼改善，但我想可能是因為不透明度是設在整個 #content，所以你在 #content 外面再加一層 div，專門設不透明度，然後 #content 裡面不要設任何背景顏色，讓背景可以整個透進來。如果你有的話，也請和我說一下試的結果。

最後，如果真得改不出來就不用改了。就改回原來的樣子，或者簡化一點不要那麼多進階功能也可以。因為要改到有很漂亮簡潔的效果，又要讓大多數的人（瀏覽器）看得到，是滿困難而需要經驗或專業的。

同學你好：

我注意到你的網頁裡面使用了非常多的進階語法，而且裡面有許多 CSS3 的語法。CSS3 的語法的好處是很好用而且功能很強，但缺點就是其實最多人使用的瀏覽器以及版本(IE6~IE8)基本上是不支援的。所以，你可以找一個 IE8 的瀏覽器看一看你的網頁，你可以發現有幾個地方有很大的不一樣。

嗯，我想我直接作個截圖好了 (IE8)：

<img src=""/>.gif" width=400/>


細節就不提了。我想最明顯的差異主要是「#header 背景圖的大小」和「#content 背景透明度」（在IE中背景沒有任何透明度）。

其實這二個問題不好解，我現在也沒什麼時間幫你試。我大致和你提我的看法與建議。

1. 背景圖的大小 (background-size)

「background-size」是 CSS3 才有的進階語法。在<a href=http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx#color>這個網頁</a>你找一下可以看到，background-size 一直到 IE9 才支援，目前最多人用的 IE8 (和之前的IE版本) 都沒有。因為沒有支援，所以就會看到目前這樣很大的差異（不過我其實覺得也滿有意思的，一般人應該不會覺得有問題）。

我建議可以試著把背景拿出來放到 #header 裡面用 &lt;img> 裡面再加個 align=right 的方式去寫。要微調位置的話再加些 margin-top 或 margin-left 就可以了。不過我沒有試，也不確定效果怎麼樣。要特別注意的是，我的經驗是 &lt;img> 要寫在 &lt;h1> 之前，這樣圖片才會置右，不然就會等 &lt;h1> 的標題文字都寫完了才會出現圖片。

我寫個示意原始碼好了（不過不保證有效果）：
<xmp><div id="header">
<img align="right" src="網址" width="270"/>
<h1>銀魂</h1>
空知英秋的少年漫畫作品，在《週刊少年Jump》2004年2號開始連載。
</div></xmp>

2. 背景透明度（opacity）

這邊你也用了非常高段語法「rgba」顏色設定：把原本的設定顏色的語法 #fffff，改為在最後一個參數為設定透明度而比較進階的 rgba(255%, 255%, 255%, 0.9)。不過一樣，IE8 也是不支援。讓 IE 支援的方式是在 CSS 中加上 <b>filter:alpha(opacity=90);</b>。如果不透明度設為 0.9，在opacity就要寫90。

所以跨瀏覽的相容性寫法大致是這樣：
<pre>#content{
background: rgba(255%, 255%, 255%, 0.9);
filter:alpha(opacity=90);
......(其他css屬性)
}</pre>

不過這樣的話，你會發現不僅背景顏色有透明效果，連「文字」也會跟著「透明」起來。我不確定怎麼改善，但我想可能是因為不透明度是設在整個 #content，所以你在 #content 外面再加一層 div，專門設不透明度，然後 #content 裡面不要設任何背景顏色，讓背景可以整個透進來。如果你有的話，也請和我說一下試的結果。

最後，如果真得改不出來就不用改了。就改回原來的樣子，或者簡化一點不要那麼多進階功能也可以。因為要改到有很漂亮簡潔的效果，又要讓大多數的人（瀏覽器）看得到，是滿困難而需要經驗或專業的。9);
filter:alpha(opacity=90);
......(其他css屬性)
}</pre>

不過這樣的話，你會發現不僅背景顏色有透明效果，連「文字」也會跟著「透明」起來。我不確定怎麼改善，但我想可能是因為不透明度是設在整個 #content，所以你在 #content 外面再加一層 div，專門設不透明度，然後 #content 裡面不要設任何背景顏色，讓背景可以整個透進來。如果你有的話，也請和我說一下試的結果。

最後，如果真得改不出來就不用改了。就改回原來的樣子，或者簡化一點不要那麼多進階功能也可以。因為要改到有很漂亮簡潔的效果，又要讓大多數的人（瀏覽器）看得到，是滿困難而需要經驗或專業的。

同學你好：

我注意到你的網頁裡面使用了非常多的進階語法，而且裡面有許多 CSS3 的語法。CSS3 的語法的好處是很好用而且功能很強，但缺點就是其實最多人使用的瀏覽器以及版本(IE6~IE8)基本上是不支援的。所以，你可以找一個 IE8 的瀏覽器看一看你的網頁，你可以發現有幾個地方有很大的不一樣。

嗯，我想我直接作個截圖好了 (IE8)：

9);
filter:alpha(opacity=90);
......(其他css屬性)
}

不過這樣的話，你會發現不僅背景顏色有透明效果，連「文字」也會跟著「透明」起來。我不確定怎麼改善，但我想可能是因為不透明度是設在整個 #content，所以你在 #content 外面再加一層 div，專門設不透明度，然後 #content 裡面不要設任何背景顏色，讓背景可以整個透進來。如果你有的話，也請和我說一下試的結果。

最後，如果真得改不出來就不用改了。就改回原來的樣子，或者簡化一點不要那麼多進階功能也可以。因為要改到有很漂亮簡潔的效果，又要讓大多數的人（瀏覽器）看得到，是滿困難而需要經驗或專業的。