JinJin 的視覺設計專區 - 跨瀏覽器相容性網頁設計 http://mepopedia.com/forum/list.php?844 Wed, 29 Apr 2026 11:25:09 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?844,20172,20172#msg-20172 [IMG] 圖像標籤跨瀏覽器解析：alt 屬性與 title 屬性於圖像替代文字與圖片標題的差異 http://mepopedia.com/forum/read.php?844,20172,20172#msg-20172
  1. 1. 相異瀏覽器：
  2. 2. 問題描述
  3. 3. 造成的影響
  4. 4. 問題分析
  5. 5. 跨瀏覽器問題整理表格
  6. 6. 解決方法：
  7. 7. 補充說明
  8. 7.1 無障礙空間
  9. 7.2 搜尋引擎最佳化(SEO)
  10. 8. 參考文章：
alt屬性與tilte屬性於圖像替代文字與圖片標題的差異

1. 相異瀏覽器：


在IE6、IE7、 IE8(Q)

2. 問題描述


依W3C規範的標準
1.alt屬性的意義為在圖片無法正常顯現時於瀏覽器呈現的「圖片替代文字」
2.title屬性的意義為滑鼠移到圖片上時顯示的「圖片標題提示框」

而alt屬性在IE6、IE7、 IE8(Q)中，除了有圖像替代文字的功能外，若沒有title屬性，則也有信息提示的功能，但在IE8之後則修正並恢復他正確的功能：圖像的替代文字，也就是在圖像無法顯示時，(這張圖被刪掉、網路壞掉等狀況，反正無法顯示時)顯示給瀏覽器及瀏覽者的「替代文字」（Alternative text），但許多使用者都會以為alt即為圖像提示訊息的功能，也就是滑鼠移過去時，會出現文字說明。

3. 造成的影響


範例參考：
網址：http://mepopedia.com/~jinjin/cb/alttitle.html
圖示：

1.若需要顯示圖像提示跳出訊息，僅指定了alt 屬性，則在IE8(S) 及其它瀏覽器中將無法顯示圖像提示訊息。

2.若不需要顯示圖像提示跳出訊息，而指定了alt 屬性，則在IE6 IE7 IE8(Q) 中仍然會顯示圖像提示跳出訊息。

4. 問題分析


這是因為alt 屬性在 W3C HTML 規格裡，並沒有工具提示 tooltip的功能，而是IE8(Q)以前的版本將它納入，原本應該要在圖片無法顯示時才顯示出來。但 IE 卻把 alt 當成 alt+title 來用，所以當圖有正常顯示的時候，也會把 alt 屬性的內容以 title 的方式顯示出來，造成大部分的使用者都以為alt本身即使訊息提示的功能，這個部分在IE8之後的版本做了修正。

所以IE8以後，alt屬性單純做為替代文字的功能，只能用於img、area和input元素中（包括applet元素）。對於input元素，alt屬性意在用來替換提交按鈕的圖片。

而無論哪個版本，title才是正確的訊息提示(訊息跳出框)的正確使用屬性。

HTML程式碼：
<p><img src="atl-1.jpg" width="600" height="400" alt="以alt屬性來表示圖像提示訊息，只適用於IIE6、IE7、 IE8(Q)以下版本" /></p> <p><img src="atl-2.jpg" width="600" height="400" title="以title屬性來表示圖像提示訊息" alt="alt屬性正確的功能是圖片無法顯示時的替代文字功能" /></p>

5. 跨瀏覽器問題整理表格





6. 解決方法：


1.若要在每個瀏覽器都能確實的顯示「圖片標題提示框」，則使用title屬性。
2.若要在每個瀏覽器都能確實的顯示「圖片替代文字」以及「圖片標題提示框」，則alt屬性及title屬性必須一起使用。

7. 補充說明


1. 無障礙空間


無障礙空間要求圖片一定要有alt設定，在閱讀者在看不到圖片的狀態下，還是可以透過alt的說明，了解圖片的意涵。

2. 搜尋引擎最佳化(SEO)


在圖片有超連結的狀態下，設定alt對搜尋引擎最佳化(SEO)有很大的幫助。


8. 參考文章：


1.alt屬性和title屬性
2.img 的 alt 屬性和 title 屬性的差異
3.維基百科-alt屬性]]> JinJin 跨瀏覽器相容性網頁設計 Wed, 29 Feb 2012 01:43:08 +0800 http://mepopedia.com/forum/read.php?844,20008,20034#msg-20034 Re: 圖像標籤img的跨瀏覽器案例解析：圖像下方產生間隙 http://mepopedia.com/forum/read.php?844,20008,20034#msg-20034
如果是用 standard 的宣告，則只有在 IE 舊瀏覽器上會有問題，如果宣告成「HTML5」，則在幾乎所有的瀏覽器上會有「圖片下方空隙」的問題。

可參考以下網頁的「Almost standards mode」：

http://en.wikipedia.org/wiki/Quirks_mode#Almost_standards_mode


另外，底下這個文章也有提及相關問題（此文主要是介紹「DOCTYPE」）：

http://www.fantxi.com/blog/archives/browser-mode/]]> HP 跨瀏覽器相容性網頁設計 Mon, 13 Feb 2012 16:09:22 +0800 http://mepopedia.com/forum/read.php?844,20019,20019#msg-20019 圖像標籤img的跨瀏覽器案例解析： IE 5.5 / 6 不支援 PNG 圖片透明背景 http://mepopedia.com/forum/read.php?844,20019,20019#msg-20019
  1. 1. 相異瀏覽器：
  2. 2. 問題描述
  3. 3. 造成的影響
  4. 4. 問題分析
  5. 5. 跨瀏覽器問題整理表格
  6. 6. 解決方法：
  7. 7. 補充說明
  8. 7.1 無障礙空間
  9. 7.2 搜尋引擎最佳化(SEO)
  10. 8. 參考文章：
  11. 9. 相異瀏覽器
  12. 10. 問題描述
  13. 11. 解決方法
  14. 11.1 在 HTML 中使用圖片標籤
  15. 11.2 在 CSS 中使用背景屬性（background）
[圖像標籤img] IE 5.5 / 6 不支援 PNG 圖片透明背景

9. 相異瀏覽器


IE 5.5 / 6

10. 問題描述


IE 5.5 / 6 只要遇到有使用「透明背景」設定的 PNG 圖片，就會發生問題，原本應該要透明的部分都會變成灰色的，而這個小瑕疵一直到 IE 7 才做出修正。

11. 解決方法



1.盡量避免用 PNG 透明背景

(Hsinping建議：應該不要建議「盡量避免使用 PNG」比較好。)

圖片的使用主要分為二大類：1. 在 HTML 中使用圖片標籤；2. 在 CSS 中使用 background 屬性。

因此，PNG 圖片透明度的解法也要從這二大類著手。

1. 在 HTML 中使用圖片標籤


使用 CSS 與 HTML 配合的解法：

http://www.cnblogs.com/yuzhongwusan/archive/2009/04/17/1438119.html (方法二)

使用純 Javascript 的解法：

http://www.cnblogs.com/yuzhongwusan/archive/2009/04/17/1438119.html (方法三)


2. 在 CSS 中使用背景屬性（background）


解決方法：使用 IE 專有的「filter」(屬性)。

參考資料：
http://leah.pixnet.net/blog/post/24046364
http://www.cnblogs.com/yuzhongwusan/archive/2009/04/17/1438119.html (方法一)

CSS Example: 
.the_png_iamge {
    background: url('bg.png') no-repeat left top ;
    _filter:progid: DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png', sizingMethod='scale');
    _background: none;
}

在這個 CSS 解法裡面，我們可以看到在最後的 background 屬性前面有加底線 (_)，這個目的是為了讓「IE6 之前的版本」看得到，其他的版本看不到。背景設定為「none」的主因是因為 filter 裡面的 AlphaImageLoader 已經把背景設為透明的圖片模式，但原來的 background image 還是不透明的，會把效果蓋掉，所以要把 background 設為 none。

此外，在「AlphaImageLoader」中，我們還可以看到 sizingMethod 這個屬性。sizingMethod 有 crop、image、scale 三種值。預設是image，也就是PNG圖片照原本圖片大小顯示。如果使用scale的話，圖片會依照div的尺寸縮放；如果用crop且圖片尺寸比DIV還大的話，圖片超出DIV的部分會被切掉。

在使用上的建議原則上是如果 PNG 圖片使用的量小，建議使用 2~3 行就可解決的「filter」解法，如此 CSS 碼量小而也不致重複。而如果是 PNG 使用的量大，或是難以轉為在 CSS 的情況下使用，建議可使用 Javascript 的解法。

另外，若背景圖片已設為 png 之透明模式，又需在裡面寫上「文字」（例如在 DIV 裡可），則在 IE6 中這個文字也會跟著「透明」起來。這個效果當然（或者基本上）不是我們要的。這時候，我們可以在這個 DIV 裡加上「position:relative;」的 CSS 設定。如此，文字的「透明」效果就會消失了。同時，如這個文字是超連結，在超連連標籤（a）裡面也要加上「position:relative;」。（此作法之參考資料：http://blog.xuite.net/mcda/warehouse/17182144）


在這邊也和大家分享一下所謂的「CSS Hack」，以以下這個例子說明： 
body {  
    color: red; /* all browsers, of course */  
    color: green\9; /* IE8 and below */  
    *color: yellow; /* IE7 and below */  
    _color: orange; /* IE6 */  
}

我們可以看到在 CSS 的「值」後面加上「\9」，這樣就只有「IE8 和以下版本」的瀏覽器看得到（看得懂）。所以以後要是有什麼跨瀏覽器的設定是只希望 IE8 以下有效果的，就在那一行 CSS 設定中的值後面加「\9」就可以了。

同時，針對「IE7 和以下版本」的瀏覽器，就是在 CSS「屬性」前面加上「*」。針對「IE6」的瀏覽器，就是在 CSS「屬性」前面加上「_」。這樣基本上就是針對 IE 系列的「CSS Hack」了。


2.使用微軟IE專用的濾鏡
為各個瀏覽器添加不同設定的CSS

HTML程式碼：


CSS程式碼


3.透過 AlphaImageLoader 篩選器(filter)修正 IE 5.5 / 6 無法正常顯示 PNG 透明背景的問題


參考文章：
1.http://blog.miniasp.com/post/2008/07/20/Fix-IE-PNG-Transparency-Problem-in-IE-5-6.aspx
2.http://tw.myblog.yahoo.com/richard-tung/article?mid=1729&prev=2576&l=f&fid=61
3.http://philsu.tw/index.php/deisgn-treasures/tutorials/item/use-css-control-ie6-show-png-image]]> JinJin 跨瀏覽器相容性網頁設計 Sun, 12 Feb 2012 02:00:35 +0800 http://mepopedia.com/forum/read.php?844,20008,20009#msg-20009 Re: 圖像標籤（img）的跨瀏覽器案例解析：圖像下方產生間隙 http://mepopedia.com/forum/read.php?844,20008,20009#msg-20009
http://mepopedia.com/forum/read.php?804,17462

另外，如果這個問題和「跨瀏覽器」有關的話，建議也請說明這個問題在不同瀏覽器上不同的地方。如此對這個問題可以有更深入的了解。同時，如果和「跨瀏覽器」沒有關係會話，可能也不用強調這個問題是屬於跨瀏覽器的問題。

目前有一個可以觀察的例子是這個頁面(六～七世紀漢語文化圈的印度佛教思潮－國科會哲學學門人才培育計畫)：

http://buddhica.nccu.edu.tw/

這個頁面 (或網站) 在 IE 瀏覽器中 (應該是 IE6~IE8 都有) 有水平導覽列圖片下方有空隙的問題，而在其他瀏覽器中似乎就沒有。我想這可能是個可以著手的地方。當然，這個空隙問題也不一定是和圖片標籤有關。這一點就需要進一步的分析。

最後，這個問題應該是和「圖片（或圖像）標籤」有關，而不是「圖像屬性」。]]> HP 跨瀏覽器相容性網頁設計 Fri, 10 Feb 2012 19:44:02 +0800 http://mepopedia.com/forum/read.php?844,20008,20008#msg-20008 [IMG][IE6/7] 圖像標籤跨瀏覽器解析：圖像下方產生間隙 http://mepopedia.com/forum/read.php?844,20008,20008#msg-20008
  1. 1. 相異瀏覽器：
  2. 2. 問題描述
  3. 3. 造成的影響
  4. 4. 問題分析
  5. 5. 跨瀏覽器問題整理表格
  6. 6. 解決方法：
  7. 7. 補充說明
  8. 7.1 無障礙空間
  9. 7.2 搜尋引擎最佳化(SEO)
  10. 8. 參考文章：
  11. 9. 相異瀏覽器
  12. 10. 問題描述
  13. 11. 解決方法
  14. 11.1 在 HTML 中使用圖片標籤
  15. 11.2 在 CSS 中使用背景屬性（background）
  16. 12. 相異瀏覽器
  17. 13. 問題描述
  18. 13.1 圖片無置於表格中測試
  19. 13.2 圖片置於表格中測試
  20. 14. 解決方法
  21. 14.1 變更vertiical-align的值
  22. 14.2 改變區塊屬性
圖像下方產生間隙

12. 相異瀏覽器


IE6、IE7

13. 問題描述


在img元素的父元素中，試著顯示出背景或border時，會發現img元素之下，會產生一道小小的間隙。這並非瀏覽器的bug，而是依照CSS的規格，vertiical-align的起始值為 「baseline」，因此圖像下方會對齊「baseline」的位置而產生此現象。

1. 圖片無置於表格中測試



範例一

以XHTML1.0撰寫的DOCTYPE 宣告方式撰寫html

範例網址：http://mepopedia.com/~jinjin/cb/img-01-1.html

IE6及IE7顯示→下方有空隙

[IMG]http://i556.photobucket.com/albums/ss1/whc915/img-ie6.jpg[/IMG]

其他瀏覽器顯示→下方無空隙

[IMG]http://i556.photobucket.com/albums/ss1/whc915/img-g.jpg[/IMG]


完整HTML程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圖像下方產生間隙</title> <style type="text/css"> h1 { background-color: #E20B34; } </style> </head> <body> <h1> <img src="img-01.jpg"/> </h1> </body> </html>
CSS程式碼
h1{background-color: #E20B34;}
[hr]

範例二

以HTML4.01撰寫的DOCTYPE 宣告方式撰寫html

範例網址：http://mepopedia.com/~jinjin/cb/img-01-1-h4.html

無論哪一個版本的瀏覽器：IE6、IE7、IE8、googleChrome、FireFox，圖像下方皆會產生間隙

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
[hr]

範例三

以html5撰寫的DOCTYPE 宣告方式撰寫html

範例網址：http://mepopedia.com/~jinjin/cb/img-01-1-h5.html

[IMG]http://i556.photobucket.com/albums/ss1/whc915/img-ie8-h5.jpg[/IMG]

無論哪一個版本的瀏覽器：IE6、IE7、IE8、googleChrome、FireFox，圖像下方皆會產生間隙

僅html5撰寫的DOCTYPE 宣告語法

<!DOCTYPE html>
[hr]

2. 圖片置於表格中測試



範例四

以XHTML1.0的DOCTYPE 宣告方式撰寫html

範例網址：http://mepopedia.com/~jinjin/cb/img-table-1.html

[IMG]http://i556.photobucket.com/albums/ss1/whc915/img-table-ie6.jpg[/IMG]

圖像顯示與無放置表格中的結果不同

則無論哪一個版本的瀏覽器都沒有下方間隙的問題


完整圖像放置於表格中之XHTML1.0的DOCTYPE 宣告方式撰寫html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圖片置入表格中</title> <style type="text/css"> td { background-color: #E7134D; } </style> </head> <body> <table width="100%" border="0"> <tr> <td><img src="img-02.jpg" width="600" height="400" /></td> </tr> </table> </body> </html>
[hr]

範例五

以HTML4.01的DOCTYPE 宣告方式撰寫html

範例網址：http://mepopedia.com/~jinjin/cb/img-table-1-h4.html

IE6及IE7圖片下方皆無空隙

而其他版本：IE8、googleChrome、FireFox，圖像下方則接產生空隙

HTML4.01的DOCTYPE 宣告方式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
[hr]

範例六

以HTML5的!DOCTYPE 宣告方式撰寫html

範例網址：http://mepopedia.com/~jinjin/cb/img-table-2.html

[IMG]http://i556.photobucket.com/albums/ss1/whc915/img-table-gc.jpg[/IMG]

則與無放置表格的結果也很不一樣

IE6及IE7圖片下方皆無空隙

而其他版本：IE8、googleChrome、FireFox，圖像下方則接產生空隙

HTML5的!DOCTYPE 宣告方式

<!DOCTYPE html>
[hr]

彙整以上六個針對圖片有無放置於表格以及不同ＤＯＣＴＹＰＥ宣告的範例，整理以下表格

[IMG]http://i556.photobucket.com/albums/ss1/whc915/img-table-1.jpg[/IMG]

[hr]

14. 解決方法


這個間隙其實是為了能讓文字在基準線 「baseline」之下的部分也能完整顯示而保留的區域─「descender」。在英文字母中，像「g」和「j」這些字母會超出基準線的下方，而用來顯示這個超出之部分的區域，在此就變成了間隙。

1. 變更vertiical-align的值


只要將vertiical-align屬性的值，從起始值的「baseline」變更為對齊該行整理下方的「bottom」即可。由於vertiical-align是行內元素中可直接設定的屬性，因此只要以img元素為套用對象，設定「vertiical-align:bottom;」，則圖像下方的間隙就會消失。

HTML程式碼：
<h1> <img scr"img-01.jpg"/> </h1>
CSS程式碼
h1{background-color: #E20B34;} img{vertiical-align:bottom;}
範例網址：http://mepopedia.com/~jinjin/cb/img-01-v.html
修改過後
IE6及IE7顯示→下方無空隙

[IMG]http://i556.photobucket.com/albums/ss1/whc915/img-bottom.jpg[/IMG]

[hr]

2. 改變區塊屬性


由於vertiical-align屬性是設定行內元素(以及th元素及td元素)之垂直位置的屬性，所以不會影響區塊層級元素。因此在img元素中設定「display:block;」的話，圖像下方就不會出現間隙了。

HTML程式碼：
<h1> <img scr"img-01.jpg"/> </h1>
CSS程式碼
h1{background-color: #E20B34;} img{display: block;}
範例網址：http://mepopedia.com/~jinjin/cb/img-01-b.html
修改過後
IE6及IE7顯示→下方無空隙


[hr]

參考文章：
http://www.dotblogs.com.tw/jasonyang/archive/2011/04/19/23108.aspx
http://www.seohouse.org/web-design-css-the-common-solution-to-the-problem.html
XHTML+CSS虎之卷，旗標出版社，大藤幹著，p.163-164]]> JinJin 跨瀏覽器相容性網頁設計 Fri, 10 Feb 2012 09:20:15 +0800 http://mepopedia.com/forum/read.php?844,20005,20005#msg-20005 表單屬性list-style-image的跨瀏覽器案例解析：將清單項目的開頭符號設為圖像時，其垂直位置會偏離 http://mepopedia.com/forum/read.php?844,20005,20005#msg-20005
  1. 1. 相異瀏覽器：
  2. 2. 問題描述
  3. 3. 造成的影響
  4. 4. 問題分析
  5. 5. 跨瀏覽器問題整理表格
  6. 6. 解決方法：
  7. 7. 補充說明
  8. 7.1 無障礙空間
  9. 7.2 搜尋引擎最佳化(SEO)
  10. 8. 參考文章：
  11. 9. 相異瀏覽器
  12. 10. 問題描述
  13. 11. 解決方法
  14. 11.1 在 HTML 中使用圖片標籤
  15. 11.2 在 CSS 中使用背景屬性（background）
  16. 12. 相異瀏覽器
  17. 13. 問題描述
  18. 13.1 圖片無置於表格中測試
  19. 13.2 圖片置於表格中測試
  20. 14. 解決方法
  21. 14.1 變更vertiical-align的值
  22. 14.2 改變區塊屬性
  23. 14.3 表單風格（list-style）
  24. 14.3.1 將清單項目的開頭符號設為圖像時，其垂直位置會偏離

3. 表單風格（list-style）



list-style-image (12.6.2)

1. 將清單項目的開頭符號設為圖像時，其垂直位置會偏離


相異瀏覽器：FF、IE6、IE7、OP

問題描述：
使用list-style-image 屬性，可以設定圖像作為清單項目符號，但在大部份的瀏覽器，不僅會造成文字的垂直位置大幅偏離，更糟的是沒辦法調整該位置，因此目前鮮少使用list-style-image屬性，而是採用li元素的背景圖像來代替。

解決方法：
1)不使用list-style-image屬性，而是將清單的符號設為不顯示，並改用背景圖像來顯示符號的程式碼，利用background-position屬性來調整細部的顯示位置更方便，基本上，只要利用list-style等屬性將清單原本的符號消除，並保留li元素左側用來顯示圖像的padding區域，然後在該處顯示背景圖像即可。例如：

HTML程式碼：
<ul>
<li> 清單項目1</li>
<li> 清單項目2</li>
<li> 清單項目3</li>
<li> 清單項目4</li>
</ul>

CSS程式碼
ul{list-style:none;margin:0;padding:0;line-hiegh:1.5;}
li{margin:0;padding:0 0 0 15px;background:url(marker.gif) 0 0.35em no-repead;}

參考文章：
XHTML+CSS虎之卷，旗標出版社，大藤幹著，p.180-181]]> JinJin 跨瀏覽器相容性網頁設計 Fri, 10 Feb 2012 01:38:01 +0800 http://mepopedia.com/forum/read.php?844,20004,20004#msg-20004 文字屬性font的跨瀏覽器案例解析：使用%來設定大小的文字，其顯示狀況會因瀏覽器而異 http://mepopedia.com/forum/read.php?844,20004,20004#msg-20004
  1. 1. 相異瀏覽器：
  2. 2. 問題描述
  3. 3. 造成的影響
  4. 4. 問題分析
  5. 5. 跨瀏覽器問題整理表格
  6. 6. 解決方法：
  7. 7. 補充說明
  8. 7.1 無障礙空間
  9. 7.2 搜尋引擎最佳化(SEO)
  10. 8. 參考文章：
  11. 9. 相異瀏覽器
  12. 10. 問題描述
  13. 11. 解決方法
  14. 11.1 在 HTML 中使用圖片標籤
  15. 11.2 在 CSS 中使用背景屬性（background）
  16. 12. 相異瀏覽器
  17. 13. 問題描述
  18. 13.1 圖片無置於表格中測試
  19. 13.2 圖片置於表格中測試
  20. 14. 解決方法
  21. 14.1 變更vertiical-align的值
  22. 14.2 改變區塊屬性
  23. 14.3 表單風格（list-style）
  24. 14.3.1 將清單項目的開頭符號設為圖像時，其垂直位置會偏離
  25. 14.4 文字屬性font
  26. 14.4.1 使用%來設定大小的文字，其顯示狀況會因瀏覽器而異

4. 文字屬性font



1. 使用%來設定大小的文字，其顯示狀況會因瀏覽器而異


相異瀏覽器：FF、IE6、IE7、OP

問題描述：
一般瀏覽器的預設字體大小為16像素。
我們雖然可以將文字大小設定為1%~100%，但實際上的顯示大小卻不會以1%為單位進行變化。16像素的文字，以像素為單位在個人電腦的畫面上顯示時，也只能呈現1px~16px共 16個階段的大小，而且設定多少%時會以多少px顯示出來，會因瀏覽器而有所不同，所以我們必須特別注意時計顯示的大小。

目前在CSS中設定文字大小時，使用%為單位做設定的方式已為主流。然而根據設定%值不同，在各瀏覽器中所顯示的大小會有差異，依情況不同，有時可能會造成難以閱讀的狀況。

解決方法：
1)在IE7,FireFox2與Opera9中設定大小為70~75%之文字顯示結果，以文字72%為例，在IE7與Opera9中是以一般較小的文字顯示，但在FireFox2則是使用更小一級的尺寸來顯示，這是相當難以閱讀的尺寸，這種因瀏覽器而造成的文字大小差異，雖然可以在瀏覽器做測試再做最後做修正，但若能先知道瀏覽器預設大小及對應的%設定值的顯示結果，就可避免設定出產生問題的%值。

參考文章：
XHTML+CSS虎之卷，旗標出版社，大藤幹著，p.173-174]]> JinJin 跨瀏覽器相容性網頁設計 Fri, 10 Feb 2012 01:35:10 +0800 http://mepopedia.com/forum/read.php?844,20003,20003#msg-20003 浮動屬性Float的跨瀏覽器案例解析：在IE中，用了%設定寬度之float多欄式版面會無法正常顯示 http://mepopedia.com/forum/read.php?844,20003,20003#msg-20003
  1. 1. 相異瀏覽器：
  2. 2. 問題描述
  3. 3. 造成的影響
  4. 4. 問題分析
  5. 5. 跨瀏覽器問題整理表格
  6. 6. 解決方法：
  7. 7. 補充說明
  8. 7.1 無障礙空間
  9. 7.2 搜尋引擎最佳化(SEO)
  10. 8. 參考文章：
  11. 9. 相異瀏覽器
  12. 10. 問題描述
  13. 11. 解決方法
  14. 11.1 在 HTML 中使用圖片標籤
  15. 11.2 在 CSS 中使用背景屬性（background）
  16. 12. 相異瀏覽器
  17. 13. 問題描述
  18. 13.1 圖片無置於表格中測試
  19. 13.2 圖片置於表格中測試
  20. 14. 解決方法
  21. 14.1 變更vertiical-align的值
  22. 14.2 改變區塊屬性
  23. 14.3 表單風格（list-style）
  24. 14.3.1 將清單項目的開頭符號設為圖像時，其垂直位置會偏離
  25. 14.4 文字屬性font
  26. 14.4.1 使用%來設定大小的文字，其顯示狀況會因瀏覽器而異
  27. 14.5 浮動屬性(Float)
  28. 14.5.1 在IE中，用了%設定寬度之float多欄式版面會無法正常顯示

5. 浮動屬性(Float)



1. 在IE中，用了%設定寬度之float多欄式版面會無法正常顯示


相異瀏覽器：FF、IE6、IE7、OP

問題描述：
使用float多欄式版面時，若以%為單位來設定所有欄的寬度，則在IE中有能因為瀏覽器視窗寬度不同，造成顯示混亂。
HTML中最後配置的欄位有可能因為視窗的寬度無法顯示到指定位置，於是就跑到其他欄位的下方。
要解決這個問題，一般會將各欄位的寬度設定為合計值比100%少一些，但除此之外也有其他的解決方法。

圖說：
將兩個寬度設為50%的DIV元素以float設為橫向並排，在IE中，根據視窗寬度不同，其中一欄可能會跑到其他欄的下方去。

解決方法：
1)使寬度合計起來比100%小一點。
依IE的版本的不同其臨界值也會不同，不過大致維持在96%以下，顯示起來就不會有問題，左右欄不設為50%，而設為48%的話，就不會發生其中一欄顯示到下方的情況。
但是顯示時在水平方向就會出現4%以上的留白，視版面設計不同，留白若全部在左邊或右邊，看起來會比較顯眼，因此多數網站在雙欄版面中，會將左右方開，一邊設定為float:left，另一邊則設為float:right，把留白放在中間。

2)在父元素中設定1px的padding。
前述的方法，可能造成版面看起來不自然，這時可採用另一種方法，就是將寬度合計為100%，僅加入padding來做處理。
在欄位全體之父元素box中，於和最後設定float之欄位鄰接的那一側，設定1px以上的padding，便可以解決問題。假設在body元素中依序配置了#main以及#sub等兩個div元素，而兩欄均設定為float:lef的話，則只要在body元素中設定：padding-right:1px;，版面就能正常顯示了。

例如：
HTML程式碼：

<body>
<div id="main>
....
</div>
<div id="sub">
....
</div>
</body>

CSS程式碼
body{
padding-right:1px;
}

#main{
float:left;
width:50%
}

#sub{
float:left;
width:50%
}


3)在最後的欄位中設定-1px的margin。
假設在body元素中依序配置了#main以及#sub等兩個div元素，而兩欄均設定為float:right的話，則只要在#sub元素中設定：margin-left:-1px;，版面就能正常顯示了。
反過來，若設定margin-right:-1px;則依瀏覽器的種類及版本不同，有可能出現水平方向的捲軸，此時，可在margin被設定為-1px的元素的父元素中設定 overflow:hidden; ，就可以讓水平方向捲軸不顯示出來。
例如：

HTML程式碼：
<body>
<div id="main>
....
</div>
<div id="sub">
....
</div>
</body>

CSS程式碼
#main{
float:right;
width:50%
}

#sub{
margin-left:-1px;
float:right;
width:50%
}

參考文章：
XHTML+CSS虎之卷，旗標出版社，大藤幹著，p.193-196]]> JinJin 跨瀏覽器相容性網頁設計 Fri, 10 Feb 2012 01:31:12 +0800 http://mepopedia.com/forum/read.php?844,20002,20002#msg-20002 段落標籤(p)的跨瀏覽器案例解析：段落標籤(p)預設前後邊距問題 http://mepopedia.com/forum/read.php?844,20002,20002#msg-20002
  1. 1. 相異瀏覽器：
  2. 2. 問題描述
  3. 3. 造成的影響
  4. 4. 問題分析
  5. 5. 跨瀏覽器問題整理表格
  6. 6. 解決方法：
  7. 7. 補充說明
  8. 7.1 無障礙空間
  9. 7.2 搜尋引擎最佳化(SEO)
  10. 8. 參考文章：
  11. 9. 相異瀏覽器
  12. 10. 問題描述
  13. 11. 解決方法
  14. 11.1 在 HTML 中使用圖片標籤
  15. 11.2 在 CSS 中使用背景屬性（background）
  16. 12. 相異瀏覽器
  17. 13. 問題描述
  18. 13.1 圖片無置於表格中測試
  19. 13.2 圖片置於表格中測試
  20. 14. 解決方法
  21. 14.1 變更vertiical-align的值
  22. 14.2 改變區塊屬性
  23. 14.3 表單風格（list-style）
  24. 14.3.1 將清單項目的開頭符號設為圖像時，其垂直位置會偏離
  25. 14.4 文字屬性font
  26. 14.4.1 使用%來設定大小的文字，其顯示狀況會因瀏覽器而異
  27. 14.5 浮動屬性(Float)
  28. 14.5.1 在IE中，用了%設定寬度之float多欄式版面會無法正常顯示
  29. 14.6 段落標籤 p
  30. 14.6.1 段落標籤(p)預設前後邊距問題

6. 段落標籤 p



1. 段落標籤(p)預設前後邊距問題



相異瀏覽器：IE6、IE7

問題描述：
一般瀏覽器對段落標籤預設有以「一個字體大小(font-size) = 1em」為高度的前邊距 (margin-before)與後邊距 (margin-after)，使得段落間在排版上有一定的區隔。但在IE6與IE7中則沒有此前後的預設邊距。（註：margin-brefore/-after 效果與 margiin-top/-bottom 相似。）

解決方法：
1) 使用 CSS Reset：無論使用時希望或不希望有預設的前後邊距，都可以在共用的 CSS 檔案中設定屬性值。例如：
p {margin: 0;} 或 p {margin: 1em 0;}

參考文章：
http://mepopedia.com/forum/read.php?844,15896,15956#msg-15956]]> JinJin 跨瀏覽器相容性網頁設計 Thu, 09 Feb 2012 14:38:53 +0800 http://mepopedia.com/forum/read.php?844,20001,20001#msg-20001 清單標籤(ul ol li)的跨瀏覽器案例解析： IE瀏覽器瀏覽器下列表式型無效的問題 http://mepopedia.com/forum/read.php?844,20001,20001#msg-20001
  1. 1. 相異瀏覽器：
  2. 2. 問題描述
  3. 3. 造成的影響
  4. 4. 問題分析
  5. 5. 跨瀏覽器問題整理表格
  6. 6. 解決方法：
  7. 7. 補充說明
  8. 7.1 無障礙空間
  9. 7.2 搜尋引擎最佳化(SEO)
  10. 8. 參考文章：
  11. 9. 相異瀏覽器
  12. 10. 問題描述
  13. 11. 解決方法
  14. 11.1 在 HTML 中使用圖片標籤
  15. 11.2 在 CSS 中使用背景屬性（background）
  16. 12. 相異瀏覽器
  17. 13. 問題描述
  18. 13.1 圖片無置於表格中測試
  19. 13.2 圖片置於表格中測試
  20. 14. 解決方法
  21. 14.1 變更vertiical-align的值
  22. 14.2 改變區塊屬性
  23. 14.3 表單風格（list-style）
  24. 14.3.1 將清單項目的開頭符號設為圖像時，其垂直位置會偏離
  25. 14.4 文字屬性font
  26. 14.4.1 使用%來設定大小的文字，其顯示狀況會因瀏覽器而異
  27. 14.5 浮動屬性(Float)
  28. 14.5.1 在IE中，用了%設定寬度之float多欄式版面會無法正常顯示
  29. 14.6 段落標籤 p
  30. 14.6.1 段落標籤(p)預設前後邊距問題
  31. 14.7 清單標籤(ul ol li)
  32. 14.7.1 IE瀏覽器瀏覽器下列表式型無效的問題

7. 清單標籤(ul ol li)



1. IE瀏覽器瀏覽器下列表式型無效的問題



問題說明：
用到了li標籤，發現在IE瀏覽器下li前面默認的實心圓點不顯示，也就是說list-style-type:disc無效，但是在firefox下確實正常的。
原因可能是因為某些浮動設置造成了li不正常顯示

解決方法：
解決的方法也很簡單，就是使用增加一個屬性：
list-style-position: inside
這樣列表樣​​式類型屬性就生效了。

資料來源：
http://www.weste.net/2010/10-8/72876.html]]> JinJin 跨瀏覽器相容性網頁設計 Thu, 09 Feb 2012 14:31:51 +0800 http://mepopedia.com/forum/read.php?844,19837,19837#msg-19837 [列表] 常見跨瀏覽器相容問題整理 http://mepopedia.com/forum/read.php?844,19837,19837#msg-19837
  1. 1. 相異瀏覽器：
  2. 2. 問題描述
  3. 3. 造成的影響
  4. 4. 問題分析
  5. 5. 跨瀏覽器問題整理表格
  6. 6. 解決方法：
  7. 7. 補充說明
  8. 7.1 無障礙空間
  9. 7.2 搜尋引擎最佳化(SEO)
  10. 8. 參考文章：
  11. 9. 相異瀏覽器
  12. 10. 問題描述
  13. 11. 解決方法
  14. 11.1 在 HTML 中使用圖片標籤
  15. 11.2 在 CSS 中使用背景屬性（background）
  16. 12. 相異瀏覽器
  17. 13. 問題描述
  18. 13.1 圖片無置於表格中測試
  19. 13.2 圖片置於表格中測試
  20. 14. 解決方法
  21. 14.1 變更vertiical-align的值
  22. 14.2 改變區塊屬性
  23. 14.3 表單風格（list-style）
  24. 14.3.1 將清單項目的開頭符號設為圖像時，其垂直位置會偏離
  25. 14.4 文字屬性font
  26. 14.4.1 使用%來設定大小的文字，其顯示狀況會因瀏覽器而異
  27. 14.5 浮動屬性(Float)
  28. 14.5.1 在IE中，用了%設定寬度之float多欄式版面會無法正常顯示
  29. 14.6 段落標籤 p
  30. 14.6.1 段落標籤(p)預設前後邊距問題
  31. 14.7 清單標籤(ul ol li)
  32. 14.7.1 IE瀏覽器瀏覽器下列表式型無效的問題
  33. 15. 標籤
  34. 15.1 表格標籤(table)
  35. 15.2 清單標籤(ul ol li)
  36. 15.3 段落標籤 p
  37. 15.4 圖像標籤 img
  38. 15.4.1 圖像下方產生間隙
  39. 15.4.2 PNG 透明圖片支援
  40. 15.4.3 alt、title使用上的不同
  41. 16. 屬性
  42. 16.1 浮動屬性(Float)
  43. 16.2 背景屬性（background）
  44. 16.3 邊框屬性（border）
  45. 16.4 文字屬性font
  46. 16.5 行高（line-height）
  47. 16.6 表單風格（list-style）
  48. 16.7 邊距（margin）
  49. 16.8 內距（padding）
  50. 16.9 定位屬性（position）
  51. 16.10 垂直置齊（vertical-align）

15. 標籤


1. 表格標籤(table)


2. 清單標籤(ul ol li)


[color=#000033][url=http://mepopedia.com/forum/read.php?844,20001]1.IE瀏覽器瀏覽器下列表式型無效的問題[/url][/color]

3. 段落標籤 p


[color=#000033][url=http://mepopedia.com/forum/read.php?844,20002]1.段落標籤(p)預設前後邊距問題[/url][/color]

4. 圖像標籤 img


1. 圖像下方產生間隙


http://mepopedia.com/forum/read.php?844,20008

2. PNG 透明圖片支援


IE 5.5 / 6 不支援 PNG 圖片透明背景：http://mepopedia.com/forum/read.php?844,20019

3. alt、title使用上的不同


ALT屬性與tilte屬性於圖像替代文字與信息提示功能的差異：http://mepopedia.com/forum/read.php?844,20172

16. 屬性


以下以 CSS2 官方文件之「屬性 properties」作為分類依據。（括號內為官方文件之章節）
參考資料 (Eric Meyer)：http://meyerweb.com/eric/css/references/css2ref.html

1. 浮動屬性(Float)



[url=http://vd.mepopedia.com/forum/read.php?844,18331]1.雙倍邊距(Double Margin)問題[/url]
[url=http://mepopedia.com/forum/read.php?844,20003]2.在IE中，用了%設定寬度之float多欄式版面會無法正常顯示[/url]


2. 背景屬性（background）


background (14.2.1)

background-attachment (14.2.1)

background-color (14.2.1)

background-image (14.2.1)

background-position (14.2.1)

background-repeat (14.2.1)

3. 邊框屬性（border）


border (8.5.4)

border-bottom (8.5.4)

border-bottom-color (8.5.2)

border-bottom-style (8.5.3)

border-bottom-width (8.5.1)

border-collapse (17.6)

border-color (8.5.2)

border-left (8.5.4)

border-left-color (8.5.2)

border-left-style (8.5.3)

border-left-width (8.5.1)

border-right (8.5.4)

border-right-color (8.5.2)

border-right-style (8.5.3)

border-right-width (8.5.1)

border-spacing (17.6)

border-style (8.5.3)

border-top (8.5.4)

border-top-color (8.5.2)

border-top-style (8.5.3)

border-top-width (8.5.1)

border-width (8.5.1)



caption-side (17.4.1)

clear (9.5.2)

clip (11.1.2)

color (14.1)

content (12.2)

counter-increment (12.5)

counter-reset (12.5)

cursor (18.1)

direction (9.10)

display (9.2.5)

display (17.2)

empty-cells (17.6.1)

float (9.5.1)

[hr]

4. 文字屬性font


font (15.2.5)

font-family (15.2.2)

font-size (15.2.4)

[hr]

[url=http://mepopedia.com/forum/read.php?844,20004]1.使用%來設定大小的文字，其顯示狀況會因瀏覽器而異[/url]


[hr]

font-size-adjust (15.2.4)

font-stretch (15.2.3)

font-style (15.2.3)

font-variant (15.2.3)

font-weight (15.2.3)

height (10.5)

letter-spacing (16.4)

5. 行高（line-height）


line-height (10.8)

6. 表單風格（list-style）


list-style (12.6.2)

[hr]
list-style-image (12.6.2)

[url=http://mepopedia.com/forum/read.php?844,20005]1.將清單項目的開頭符號設為圖像時，其垂直位置會偏離[/url]


[hr]


list-style-position (12.6.2)

list-style-type (12.6.2)

7. 邊距（margin）


margin (8.3)

[hr]

margin-bottom (8.3)
margin-left (8.3)
margin-right (8.3)
margin-top (8.3)

marker-offset (12.6.1)

max-height (10.7)

max-width (10.4)

min-height (10.7)

min-width (10.4)

outline (18.4)

outline-color (18.4)
outline-style (18.4)
outline-width (18.4)

overflow (11.1.1)

8. 內距（padding）


padding (8.4)

padding-bottom (8.4)
padding-left (8.4)
padding-right (8.4)
padding-top (8.4)

9. 定位屬性（position）


position (9.3.1)

top (9.3.2)
right (9.3.2)
bottom (9.3.2)
left (9.3.2)

quotes (12.4.1)

table-layout (17.5.2)

text-align (16.2)
text-decoration (16.3.1)
text-indent (16.1)
text-shadow (16.3.2)
text-transform (16.5)

unicode-bidi (9.10)

10. 垂直置齊（vertical-align）


vertical-align (10.8)

visibility (11.2)

white-space (16.6)

width (10.2)

word-spacing (16.4)

z-index (9.9.1)]]> JinJin 跨瀏覽器相容性網頁設計 Tue, 17 Jan 2012 11:49:02 +0800 http://mepopedia.com/forum/read.php?844,18418,18418#msg-18418 作業七／八跨瀏覽器修正建議 (IE6) http://mepopedia.com/forum/read.php?844,18418,18418#msg-18418
http://mepopedia.com/~jinjin/web/hw07-w

修正後：
http://mepopedia.com/~jinjin/web/hw07


IE6 畫面：



作業七的範例網頁主要在 IE6 上會有問題：

1. Table 會跑得很下面（會超過左欄內容，也就是基本上浮動失效）

原因其實也不是浮動失效，主要是 table 寬度設為 100%，IE6 會覺得要用整個 DIV 的寬度，也就是 950px 作業寬度，因此跑到下面。

解決方式我猜測是把 table 寬度設一個固定的類似 750px (或以下) 就可以了。


2. 水平導覽列會換行

這個很明顯地是因為導覽列太寬。但為什麼只有在 IE6？這剛好就是之前提的 3-pixel bug（三像素間距問題）。

解決方式不易。一個是如果沒有美觀問題，就把水平導覽列的寬度調小到 IE6 不會換行為止。(但其他瀏覽器看起來會不好看)

另一個是在 HTML 裡的 ...中加入
<!--[if IE lte 6]> <style type="text/css"> #button li { margin-right:-3px; } </style> <![endif]-->

意思就是在 IE 版本小於等於6的時候，就會把 #button li 這個元素標籤給設一個 -3px 的 margin，把多出來的 3 pixel 給扣回來。


這個網站整理了眾多 IE 的問題（主要是 IE6）：

http://www.positioniseverything.net/explorer.html]]> HP 跨瀏覽器相容性網頁設計 Wed, 07 Dec 2011 03:37:46 +0800 http://mepopedia.com/forum/read.php?844,18331,18331#msg-18331 浮動屬性Float的跨瀏覽器案例解析：雙倍邊距、浮動元素寬度、3像素空隙問題 http://mepopedia.com/forum/read.php?844,18331,18331#msg-18331
  1. 1. 相異瀏覽器：
  2. 2. 問題描述
  3. 3. 造成的影響
  4. 4. 問題分析
  5. 5. 跨瀏覽器問題整理表格
  6. 6. 解決方法：
  7. 7. 補充說明
  8. 7.1 無障礙空間
  9. 7.2 搜尋引擎最佳化(SEO)
  10. 8. 參考文章：
  11. 9. 相異瀏覽器
  12. 10. 問題描述
  13. 11. 解決方法
  14. 11.1 在 HTML 中使用圖片標籤
  15. 11.2 在 CSS 中使用背景屬性（background）
  16. 12. 相異瀏覽器
  17. 13. 問題描述
  18. 13.1 圖片無置於表格中測試
  19. 13.2 圖片置於表格中測試
  20. 14. 解決方法
  21. 14.1 變更vertiical-align的值
  22. 14.2 改變區塊屬性
  23. 14.3 表單風格（list-style）
  24. 14.3.1 將清單項目的開頭符號設為圖像時，其垂直位置會偏離
  25. 14.4 文字屬性font
  26. 14.4.1 使用%來設定大小的文字，其顯示狀況會因瀏覽器而異
  27. 14.5 浮動屬性(Float)
  28. 14.5.1 在IE中，用了%設定寬度之float多欄式版面會無法正常顯示
  29. 14.6 段落標籤 p
  30. 14.6.1 段落標籤(p)預設前後邊距問題
  31. 14.7 清單標籤(ul ol li)
  32. 14.7.1 IE瀏覽器瀏覽器下列表式型無效的問題
  33. 15. 標籤
  34. 15.1 表格標籤(table)
  35. 15.2 清單標籤(ul ol li)
  36. 15.3 段落標籤 p
  37. 15.4 圖像標籤 img
  38. 15.4.1 圖像下方產生間隙
  39. 15.4.2 PNG 透明圖片支援
  40. 15.4.3 alt、title使用上的不同
  41. 16. 屬性
  42. 16.1 浮動屬性(Float)
  43. 16.2 背景屬性（background）
  44. 16.3 邊框屬性（border）
  45. 16.4 文字屬性font
  46. 16.5 行高（line-height）
  47. 16.6 表單風格（list-style）
  48. 16.7 邊距（margin）
  49. 16.8 內距（padding）
  50. 16.9 定位屬性（position）
  51. 16.10 垂直置齊（vertical-align）
  52. 17. 雙倍邊距(Double Margin)問題
  53. 17.1 解決方法：
  54. 17.2 原理：
  55. 17.3 雙倍邊距(Double Margin)問題整理

17. 雙倍邊距(Double Margin)問題



一般使用margin：間距，會有比較多問題，因此能夠不用就盡量不用，而使用padding：內距， margin的兼容性沒有pading好，但有時候卻又不得不使用。
例如：在IE6中，若使用了float:left之後導致margin-left雙倍邊距

<div id="sidebar">這裡是sidebar</div> <div id="mainpage">這裡是mainpage</div>
CSS的設定

#sidebar{ float: left; border: 3px solid #09C; width: 200px; margin-left: 20px; } #mainpage{ border: 3px solid #F09; width: 200px; float: left; margin-left: 20px; }
在Chrome、Firefox、Opera等瀏覽器下時會正常的顯示，但是如果到了IE6下就會出現雙倍邊距。

[hr]

[color=#993300]測試網址：http://mepopedia.com/~jinjin/float/margin2.html[/color]

在IE7以上版本，以及FireFox、GoogleChrome為正常顯示，觀察的效果如下：

[IMG]http://i556.photobucket.com/albums/ss1/whc915/dm002.jpg[/IMG]


在IE6出現雙倍邊距的問題

[IMG]http://i556.photobucket.com/albums/ss1/whc915/dm003.jpg[/IMG]


1. 解決方法：


只要加入display: inline;即可

#sidebar{ float: left; border: 3px solid #09C; width: 200px; margin-left: 20px; display: inline; } #mainpage{ border: 3px solid #F09; width: 200px; float: left; margin-left: 20px; }

2. 原理：


這是因為區塊默認的display屬性值是block，當設置了浮動的同時，還設置了區塊外邊距就會出現這種情況。

另外第二個區塊和與旁邊區塊之間就不存在雙倍邊距的BUG。

[hr]

[color=#993300]解決雙倍邊距測試網址：http://mepopedia.com/~jinjin/float/margin2-inline.html[/color]

在IE6以及IE7以上版本、FireFox、GoogleChrome皆為正常顯示，觀察的效果如下：

[IMG]http://i556.photobucket.com/albums/ss1/whc915/dm005.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/dm004.jpg[/IMG]

[hr]

3. 雙倍邊距(Double Margin)問題整理


1.1 何種瀏覽器會有問題
[color=#CC0066]1.1.1        IE6[/color]

1.2 何種情況會有問題
[color=#CC0066]1.2.1 在IE6中，靠近網頁邊界的部分，若使用了float:left，也設定margin-left，(若使用了float:right，也設定margin-right)就會產生雙倍邊距[/color]

1.3 解決方式
[color=#CC0066]1.3.1 加入display: inline[/color]]]> JinJin 跨瀏覽器相容性網頁設計 Sun, 04 Dec 2011 21:59:07 +0800 http://mepopedia.com/forum/read.php?844,17480,17480#msg-17480 [CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6) http://mepopedia.com/forum/read.php?844,17480,17480#msg-17480
  1. 1. 相異瀏覽器：
  2. 2. 問題描述
  3. 3. 造成的影響
  4. 4. 問題分析
  5. 5. 跨瀏覽器問題整理表格
  6. 6. 解決方法：
  7. 7. 補充說明
  8. 7.1 無障礙空間
  9. 7.2 搜尋引擎最佳化(SEO)
  10. 8. 參考文章：
  11. 9. 相異瀏覽器
  12. 10. 問題描述
  13. 11. 解決方法
  14. 11.1 在 HTML 中使用圖片標籤
  15. 11.2 在 CSS 中使用背景屬性（background）
  16. 12. 相異瀏覽器
  17. 13. 問題描述
  18. 13.1 圖片無置於表格中測試
  19. 13.2 圖片置於表格中測試
  20. 14. 解決方法
  21. 14.1 變更vertiical-align的值
  22. 14.2 改變區塊屬性
  23. 14.3 表單風格（list-style）
  24. 14.3.1 將清單項目的開頭符號設為圖像時，其垂直位置會偏離
  25. 14.4 文字屬性font
  26. 14.4.1 使用%來設定大小的文字，其顯示狀況會因瀏覽器而異
  27. 14.5 浮動屬性(Float)
  28. 14.5.1 在IE中，用了%設定寬度之float多欄式版面會無法正常顯示
  29. 14.6 段落標籤 p
  30. 14.6.1 段落標籤(p)預設前後邊距問題
  31. 14.7 清單標籤(ul ol li)
  32. 14.7.1 IE瀏覽器瀏覽器下列表式型無效的問題
  33. 15. 標籤
  34. 15.1 表格標籤(table)
  35. 15.2 清單標籤(ul ol li)
  36. 15.3 段落標籤 p
  37. 15.4 圖像標籤 img
  38. 15.4.1 圖像下方產生間隙
  39. 15.4.2 PNG 透明圖片支援
  40. 15.4.3 alt、title使用上的不同
  41. 16. 屬性
  42. 16.1 浮動屬性(Float)
  43. 16.2 背景屬性（background）
  44. 16.3 邊框屬性（border）
  45. 16.4 文字屬性font
  46. 16.5 行高（line-height）
  47. 16.6 表單風格（list-style）
  48. 16.7 邊距（margin）
  49. 16.8 內距（padding）
  50. 16.9 定位屬性（position）
  51. 16.10 垂直置齊（vertical-align）
  52. 17. 雙倍邊距(Double Margin)問題
  53. 17.1 解決方法：
  54. 17.2 原理：
  55. 17.3 雙倍邊距(Double Margin)問題整理
  56. 18. CSS 部分
  57. 19. [color=#CC3300]1.改變底色的做法/文字居中排法[/color]
  58. 20. [color=#CC3300]2.改變文字顏色的做法[/color]
導覽列對於網頁設計來說，是一個非常重要的部分，敘述網站的導覽架構，並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。

在整個網頁設計中，肩負著重要資訊的描述以及視覺注視的任務，不能搶過主要的視覺焦點，卻要能醒目及兼具設計質感，達到網頁設計的平衡。

以下則講解，透過CSS樣式，把清單（list）文字調整成導覽列使用的方法。我們的目標是作出下面這個形式的導覽列：



1. 基本語法（HTML部份）

1.A 清單（list）採用[color=#CC0066] <ul> 標籤定義清單的範圍[/color]，並使用 [color=#CC0066]<li> 標籤定義個別項目[/color]：
<ul> <li>About</li> <li>Works</li> <li>Video</li> <li>Links</li> <li>Story</li> </ul>
1.B 加入超連結標籤 <a> 並寫入網址讓 List 具有導覽列功能：
<ul> <li><a href="index.html">About</a></li> <li><a href="works.html">Works</a></li> <li><a href="video.html">Video</a></li> <li><a href="links.html">Links</a></li> <li><a href="story.html">Story</a></li> </ul>
1.C 為導覽列加入 ID (#button)，以供 CSS 風格設定
<ul id="button"> <li><a href="index.html">About</a></li> <li><a href="works.html">Works</a></li> <li><a href="video.html">Video</a></li> <li><a href="links.html">Links</a></li> <li><a href="story.html">Story</a></li> </ul>
預覽結果（底色與文字顏色另加）：

IE6 / IE7 效果示意

IE8 / Chrome / Firefox 效果示意

觀察重點：
1. List 有預設的「圓點」標示。
2. 在 List 前後有預設的「邊距 MARGIN」（實際上的邊距值為「一行行高」：1 em）。

2. 加入 MARGIN: 0;

IE6 / IE7 效果示意


IE8 / Chrome / Firefox 效果示意


3. 加入 PADDING: 0;

IE6 / IE7 效果示意


IE8 / Chrome / Firefox 效果示意


至此兩組不同的瀏覽器效果開始統一。

4. 加入 LIST-STYLE: NONE; 
#button{
  margin: 0;
  padding: 0;
  list-style: none;
}
預覽效果

5. 將 li 元素設定為向左浮動 
#button{
  margin: 0;
  padding: 0;
  list-style: none;
}

#button li {
  float: left;
}
預覽效果


6. 設定 li 元素的寬與高 
#button{
  margin: 0;
  padding: 0;
  list-style: none;
}

#button li {
  float: left;
  width: 170px;
  line-height: 2em;
}
預覽效果


18. CSS 部分


#button {        
        [color=#CC3300]/*文字設定*/[/color]
        font-weight: bolder;
        color: #FFF;
        font-size: 14px;
    
        [color=#993300]/*將內定的邊距清除*/[/color]
        margin: 0px;

        [color=#993300]/*將清單內定的內距清除(無清除，則左側會多出約40px，範例二可不用加這一項*/[/color]
        padding:0px;
        }

#button li {
  [color=#CC3300]/*高度設定：使用 line-height 設定可讓文字自動垂直置中*/[/color]
  line-height: 2em;

  [color=#CC3300]/*背景色設定*/[/color]
  background: dodgerBlue;
}

19. [color=#CC3300]1.改變底色的做法/文字居中排法[/color]



#button li {
           [color=#CC0099]/* 讓各個清單元素靠左對齊，由原本的垂直排列變成水平排列，形成水平清單 */[/color]
   　　  float:left;

        　[color=#CC0099]/* 設定清單文字範圍的寬度 */[/color]
    　　 width:178px;
        
        　[color=#CC0099]/* 去除清單文字前面的小點*/[/color]
　   　  list-style-type:none;
        　        
        　[color=#CC0099]/* 讓清單文字居中對齊 */[/color]
    　　 text-align:center;
        　
           [color=#CC3300]/* 設定背景色，依個人喜好調整背景色，但要符合整設計風格 */[/color]
           background-color:#6E6E6E;

        　[color=#CC3300]/* 設定字距為2px，非必要 */[/color]
        　letter-spacing: 2px;
        
        　[color=#CC3300]/* 設定左邊的白邊樣式，可依個人喜好調整 */[/color]
        　border-left-width: 1px;
        　border-left-style: solid;
        　border-left-color: #FFF;
        
        　[color=#CC3300]/* 右邊留白1像素 ，可依個人喜好調整*/[/color]
           margin-right:1px;
　　　}
                
#button li a {
        　[color=#CC0099]/* 連結範圍充滿整個區塊 */[/color]
    　　 display: block;
        
        　[color=#CC0099]/* 單個連結範圍的框度和高度*/[/color]
        　width: 180px;
        　height:20px;
        
           [color=#CC3300]/* 設定連結範圍向上的內距，依狀況調整 */[/color]
        　padding-top:2px;
        
        　[color=#CC3300]/* 連結的文字設為白色以及無裝飾(無底線) ，依個人喜好調整背景色，但要符合整設計風格*/[/color]
        　color: #FFF;
        　text-decoration: none;
　　　}

#button li a:hover{
           [color=#993300]/* 設定滑鼠移過時，清單改變的底色設定 */[/color]
           background-color:#39919F;
}

完成範例
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）


[hr]


20. [color=#CC3300]2.改變文字顏色的做法[/color]


#button li {        
        float: left;
        list-style-type: none;
        letter-spacing: 2px;
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: #FFF;
        padding-left: 10px;
}
                
#button li a {
   　  display: block;
        width: 160px;
        height: 22px;
        padding-top:2px;
        color: #FFF;
        text-decoration: none;
}

#button li a:hover{
　　 /* 設定滑鼠移過時，改變文字顏色的設定 */
        color: #7CCBDC;
}

完成範例
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）]]> JinJin 跨瀏覽器相容性網頁設計 Fri, 04 Nov 2011 18:52:46 +0800 http://mepopedia.com/forum/read.php?844,17157,17157#msg-17157 [CSS3/IE filter] 漸層背景 Gradient Background http://mepopedia.com/forum/read.php?844,17157,17157#msg-17157
  1. 1. 相異瀏覽器：
  2. 2. 問題描述
  3. 3. 造成的影響
  4. 4. 問題分析
  5. 5. 跨瀏覽器問題整理表格
  6. 6. 解決方法：
  7. 7. 補充說明
  8. 7.1 無障礙空間
  9. 7.2 搜尋引擎最佳化(SEO)
  10. 8. 參考文章：
  11. 9. 相異瀏覽器
  12. 10. 問題描述
  13. 11. 解決方法
  14. 11.1 在 HTML 中使用圖片標籤
  15. 11.2 在 CSS 中使用背景屬性（background）
  16. 12. 相異瀏覽器
  17. 13. 問題描述
  18. 13.1 圖片無置於表格中測試
  19. 13.2 圖片置於表格中測試
  20. 14. 解決方法
  21. 14.1 變更vertiical-align的值
  22. 14.2 改變區塊屬性
  23. 14.3 表單風格（list-style）
  24. 14.3.1 將清單項目的開頭符號設為圖像時，其垂直位置會偏離
  25. 14.4 文字屬性font
  26. 14.4.1 使用%來設定大小的文字，其顯示狀況會因瀏覽器而異
  27. 14.5 浮動屬性(Float)
  28. 14.5.1 在IE中，用了%設定寬度之float多欄式版面會無法正常顯示
  29. 14.6 段落標籤 p
  30. 14.6.1 段落標籤(p)預設前後邊距問題
  31. 14.7 清單標籤(ul ol li)
  32. 14.7.1 IE瀏覽器瀏覽器下列表式型無效的問題
  33. 15. 標籤
  34. 15.1 表格標籤(table)
  35. 15.2 清單標籤(ul ol li)
  36. 15.3 段落標籤 p
  37. 15.4 圖像標籤 img
  38. 15.4.1 圖像下方產生間隙
  39. 15.4.2 PNG 透明圖片支援
  40. 15.4.3 alt、title使用上的不同
  41. 16. 屬性
  42. 16.1 浮動屬性(Float)
  43. 16.2 背景屬性（background）
  44. 16.3 邊框屬性（border）
  45. 16.4 文字屬性font
  46. 16.5 行高（line-height）
  47. 16.6 表單風格（list-style）
  48. 16.7 邊距（margin）
  49. 16.8 內距（padding）
  50. 16.9 定位屬性（position）
  51. 16.10 垂直置齊（vertical-align）
  52. 17. 雙倍邊距(Double Margin)問題
  53. 17.1 解決方法：
  54. 17.2 原理：
  55. 17.3 雙倍邊距(Double Margin)問題整理
  56. 18. CSS 部分
  57. 19. [color=#CC3300]1.改變底色的做法/文字居中排法[/color]
  58. 20. [color=#CC3300]2.改變文字顏色的做法[/color]
  59. 21. 一、漸層語法簡介
  60. 22. 二、各瀏覽器漸層語法說明
  61. 22.1 1.不同底色的呈現
  62. 22.2 2.各瀏覽器漸層語法
  63. 23. 三、跨瀏覽器綜合語法
[CSS3/IE filter] 漸層背景 Gradient Background

21. 一、漸層語法簡介



網頁底色的做法，常是直接設定一個顏色，如果要做出漸層底色的效果，通常會以底圖重覆的方式來設定。

但是從IE5.5開始有Filter的語法，可以做出漸層色的效果，而CSS3開始也有漸層Gradient 的語法，可以直接設定漸層色。

漸層底色的做法，若搭配得宜，通常會比單色更可營造網頁設計整體的層次感，但漸層色需慎用，若色彩或色調搭配不適合，色階層次過於誇張，非常容易淪為俗氣、質感不佳的感覺。

以下以這個莫內網站為例子做說明：
http://mepopedia.com/~jinjin/web/hw04-1/index.html

這個例子中，將底色設定為較深的藍綠色，往下漸層為較亮的藍綠色，配合整體色調，營造出具有層次，不致使底色過於單調，卻不失優雅的做法。

這樣的做法可以直接以CSS寫出，而不使用繪圖軟體處理，如此可節省檔案空間，加快處理速度，也可以很快速的做出具有層次感的漸層效果。

如圖所示：



22. 二、各瀏覽器漸層語法說明



1. 1.不同底色的呈現


以下為單色的底色、由上到下的漸層底色、以及由左到右的漸層底色的呈現方式：


/*單色的底色*/

/*由上到下*/

/*由左到右*/

2. 2.各瀏覽器漸層語法


CSS3的漸層語法，在各瀏覽器的語法略有不同，分別說明如下：

Chrome / Safari 4+: 
/*由上到下*/
background:-webkit-gradient(linear, left top, left bottom, from(#00475E), to(#007276));

/*由左至右*/
background:-webkit-gradient(linear, left top, right top, from(#00475E), to(#007276));

/*在Chrome 10 之後語法可簡化為:*/
background:webkit-linear-gradient(top, #00475E, #007276);
Firefox 3.6+ 
/*由上到下*/
background:-moz-linear-gradient(top, #00475E, #007276);

/*由左至右*/
background:-moz-linear-gradient(left, #00475E, #007276);
IE6~IE8

基本語法
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00475E', endColorstr='#007276');

參數說明
上下漸層GradientType=0
左右漸層GradientType=1
漸層起始色彩startcolorstr=#
漸層結束色彩endcolorstr=#

23. 三、跨瀏覽器綜合語法



(由上到下，以body為例) 
body {
        /*預設背景顏色, 讓不支援漸層的瀏覽器能呈現基本底色*/
        background: #278092;

        /******跨瀏覽器的底色漸層CSS語法 (由上到下)********/ 

        /*Chrome的語法*/
        background:-webkit-gradient(linear, left top, left bottom, from(#00475E), to(#007276));

        /*FireFox的語法*/
        background: -moz-linear-gradient(top, #00475E, #007276);
        
        /*IE6~IE8的語法*/
        filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00475E', endColorstr='#007276');

        /* Opera 11.10+ */
        background: -o-linear-gradient(top, #00475E, #007276);

        margin: 0px;
}




參考資料:
CSS Tricks: http://css-tricks.com/examples/CSS3Gradient/
CSS3 Maker: http://www.css3maker.com/]]> JinJin 跨瀏覽器相容性網頁設計 Sat, 29 Oct 2011 16:44:58 +0800 http://mepopedia.com/forum/read.php?844,16661,16661#msg-16661 跨瀏覽器(IE)的透明度(opacity)與圖片大小(background-size)與位置 http://mepopedia.com/forum/read.php?844,16661,16661#msg-16661 網頁設計作業，回應目的是這位同學使用了一些 CSS 的進階語法，但在IE中不支援，所以寫了篇文章和他說明及提供修改建議。（不過此作業中的網頁可能會有所修改，和原始繳交時不一樣。）

原文回應在：http://mepopedia.com/forum/read.php?855,16483,16659#msg-16659


同學你好：

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

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

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

　


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

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

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

「background-size」是 CSS3 才有的進階語法。在微軟的網頁中，你找一下可以看到，background-size 一直到 IE9 才支援，目前最多人用的 IE8 (和之前的IE版本) 都沒有。因為沒有支援，所以就會看到目前這樣很大的差異（不過我其實覺得也滿有意思的，一般人應該不會覺得有問題）。

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

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

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

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

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

最後，如果真得改不出來就不用改了。就改回原來的樣子，或者簡化一點不要那麼多進階功能也可以。因為要改到有很漂亮簡潔的效果，又要讓大多數的人（瀏覽器）看得到，是滿困難而需要經驗或專業的。]]> HP 跨瀏覽器相容性網頁設計 Mon, 17 Oct 2011 04:17:09 +0800 http://mepopedia.com/forum/read.php?844,16394,16394#msg-16394 [CSS] FLOAT：浮動屬性的排版 http://mepopedia.com/forum/read.php?844,16394,16394#msg-16394 [color=#990000]一、《FLOAT：浮動》觀念說明[/color]

網頁設計中，DIV的特性會自成一行，也就是說若沒有做特別設定，每個DIV會自動換行到下一列，若想要讓不同的DIV排列整齊並且橫向排列時，則FLOAT會是一個很好的選擇。

我們可以使用FLOAT來設定靠左或靠右的屬性，使DIV能有更多不同彈性的排版選擇。


[color=#990000]二、《FLOAT：浮動》使用說明[/color]



[color=#663300]1.兩欄以上的網頁編排設定[/color]

想要完成左右兩欄的網頁版面，光設定寬高並沒有作用，因為 Div 標籤的特性是會「自成一排」， 不管寬度是大是小，排列方式永遠是由上往下依序排列。若想要讓 Div 標籤可以左右並排，則必須仰賴「float」屬性的幫忙。

基本語法：
.box { float: left; width: 315px; margin-right: 20px; }
特別注意：用浮動屬性排版，基本上一定要加上「寬度 width」的設定才會生效。這是因為若沒有設定寬度，DIV區塊會預設會佔有100%的寬度，這樣接下來的DIV區塊就會「換行」，也就失去了「浮動排版」的意義。

另外，一般在使用 float 時，也會加上右或左的「邊距 margin」設定。這是為了讓平行區塊間有所間隔，以保持版面的協調。

[color=#663300]2.繞圖排文的設定[/color]

例如將某圖片設定為 float:left (向左浮動)，則圖片下方的文字或元素都會向上靠齊到圖片右側的空白處，就完成文繞圖的設定了。

[color=#990000]三、《FLOAT：浮動》實例解說[/color]



[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/float-1.jpg[/IMG]


區塊DIV build的寫法：

1.FLOAT浮動設定：DIV的樣式：CLASS命名為build，將DIV的浮動屬性設定靠左，寫成 float: left;
2.MARGIN邊界設定：DIV與DIV之間的?邊距為21px，margin-right: 21px;

圖示：

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/al-1.jpg[/IMG]


CSS語法如下：

.build { float: left; margin-right: 21px; width: 315px; }
待續...]]> JinJin 跨瀏覽器相容性網頁設計 Fri, 07 Oct 2011 09:07:44 +0800 http://mepopedia.com/forum/read.php?844,16385,16385#msg-16385 重新檢視美寶專區百科CSS語法及設計：以暨大外文系友會為例 http://mepopedia.com/forum/read.php?844,16385,16385#msg-16385
一、CSS 設定先後次序原則
body 等重要整體風格設定應放在 CSS 文件開頭，標籤及類別設定不應以任意順序加入。建議以以下順序加入：
　1. 整體風格設定（如body或自定之#main、#wrapper，主要為設定版面寬度、背景、基本字體、版面置中與否等）
　2. 基本風格設定（如h1、h2、p、a、table等）
　3. 區塊視覺設定（如#header、#content、#footer）

二、區塊修改建議

區塊之間之間距建議以 padding 或 margin 控制，儘量勿以段落標籤 <p> 等以「內容」方式讓版面中之區塊有間距。

頂圖區塊：#wikiheader
#wikiheader 的 background 設定應由原本之向右改為向左 (background: left)。

內容區塊：#content
#content 與 #content_list 應合併（其中 #content 應無 float:left 的必要）。同時，為消除 #content 與 #footer 之間有「灰色間隙」的問題，以加上padding-bottom 的方式解決。最後，整體寬度（包括 #content、#wikiheader、#footer 在內）應由上層的 #building 決定，故不應設定 #content 的寬度（目前是設 900px）。同時，不設定寬度也能讓 #content 達到動態調適視窗大小的目的（因 #building 已設為 max-width: 900px）。

標題區塊：#wikiTitleBox 與 #wikiTitle
1. #wikiTitleBox 不應設定寬度，應由左右邊距的設定來動態決定 #wikiTitleBox 的寬度。
2. #wikiTitleBox 與 #wikiTitle 應合併。
3. padding 與 margin 部份之目的應為讓標題文字「垂直置中」，現改用設定 line-height 方式達成，故可刪除。
4. 基於「HTML結講與CSS設計分離」之原則，建議將原寫在標籤內之水平置中語法（align=center）移至CSS中（text-align:center）。

原 CSS 碼中有 #index 的宣告與設定，但實際上百科HTML中並無相關之區塊。經判斷，此段應為從其他百科或頁面之原始碼複製，整段宜移除以節省原始碼。

三、語法簡化
例如以下 body
body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        background-color: #e3e3e3;
        background-image: url(http://mepopedia.com/group/village/imgs/top_bg.jpg);
        background-repeat: repeat-x;
}
應簡化為
body {
        margin:0;
        background: #e3e3e3 url(http://mepopedia.com/group/village/imgs/top_bg.jpg) repeat-x;
}

.QWHeading1 {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 18px;
        color: #09C;
        border-bottom-width: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #09F;
        font-weight: bold;
        background-image: url(http://mepopedia.com/group/ncnu-dfll/images/w4.gif);
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 50px;
        padding-bottom: 8px;
        padding-top: 2px;
}

應簡化為
.QWHeading1 {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 18px;
        color: #09C;
        border-bottom: 1px dotted #09F;
        font-weight: bold;
        background: url(http://mepopedia.com/group/ncnu-dfll/images/w4.gif) no-repeat left center;
        padding: 2px 0 8px 50px;
}

CSS 原始碼共289行 (2011/09/19)　　　　　　　　　修改後 CSS 原始碼共248行 (2011/10/06) 
.links {
        height: 50px;
        padding: 10px 10px 0 0;
}
.button {
        width: 105px;
        height: 28px;
        float: right;
        margin-right: 2px;
}
.image {width: 105px; height: 28px;}

.edit {
        background:url(/group/ncnu-dfll/images/w3-2.gif);
}
.forum {
        background:url(/group/ncnu-dfll/images/w2-2.gif);
}
.post {
        background:url(/group/ncnu-dfll/images/post-2.gif);
}

.edit a .image {
        background: url(/group/ncnu-dfll/images/w3-2.gif);
}
.forum a .image {
        background: url(/group/ncnu-dfll/images/w2-2.gif);
}
.post a .image {
        background: url(/group/ncnu-dfll/images/post-2.gif);
}

.button a, .button a:link, .button a:visited {
        display:block;
}
.button a:hover .image{
        visibility:hidden; height: 0; width: 0;
}
.edit {background-repeat:no-repeat;}
.button a:hover {visibility:visible; height: 28px; width: 105px;} /*IE6*/


a:link {
        color: #00468C;
        text-decoration: none;
}
a:visited {
        text-decoration: none;
        color: #00468C;
}
a:hover {
        text-decoration: underline;
        color: #366C00;
}
a:active {
        text-decoration: none;
}
body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        background-color: #e3e3e3;
        background-image: url(http://mepopedia.com/group/village/imgs/top_bg.jpg);
        background-repeat: repeat-x;
}

#top {
        margin: auto;
        width: 900px;
        background-image: url(http://mepopedia.com/group/village/imgs/top_bg.jpg);
        background-repeat: repeat-x;
        height: 25px;
        font-size: 12px;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        color: #666;
        padding: 3px;
}
#wikiheader{
        background: url(http://mepopedia.com/group/ncnu-dfll/images/wiki_top.jpg) no-repeat right;
        height: 75px;
        max-width: 900px;
}

#content{
        width: 900px;
        margin: auto;
        background-color: #FAFAFA;
        float: left;
}

#content_list {
        width: 900px;
        margin: auto;
        background-color: #FAFAFA;
}

#building {
        max-width: 900px;
        _width:expression((documentElement.clientWidth >928) ? "900px" : "auto");
        margin: auto; border: 3px solid #FFF;
}

#footer{
        margin: auto;
        background-color: #016da4;
        height: 50px;
        line-height:20px;
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 12px;
        color: #FFF;
        padding-top: 12px;
        padding-right: 5px;
        padding-left: 20px;
        clear: both;
}
#building #footer a {
        color: #6FF;
}
#content_list .page_table tr td a {
        color: #F90;
}
#index {
        width: 948px;
        border: 3px solid #FFF;
        margin-top: auto;
        margin-right: auto;
        margin-bottom: auto;
        margin-left: auto;
        background-image: url(http://mepopedia.com/group/village/imgs/index.jpg);
        height: 610px;
        background-repeat: no-repeat;
}
#wikitext {
        margin-right: 60px;
        margin-left: 60px;
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 16px;
        line-height: 21px;
        padding: 20px;
        border: 3px double #0CF;
        background-color: #FFF;
}



.list_tatle_title {
        height: 59px;
        background-image: url(http://mepopedia.com/group/village/imgs/list_title.gif);
        background-repeat: no-repeat;
}
.list_content {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 15px;
        height: 13px;
        padding: 5px;
        font-weight: bold;
        border-top-width: 1px;
        border-top-style: dotted;
        border-top-color: #09C;
        border-right-color: #09C;
        border-bottom-color: #09C;
        border-left-color: #09C;
        list-style-image: url(http://mepopedia.com/group/village/imgs/icon_news.gif);
        list-style-position: inside;
        background-color: #FFF;
}
.list_icon {
        background-image: url(http://mepopedia.com/group/village/imgs/icon_news.gif);
        background-repeat: no-repeat;
        background-position: center;
        width: 25px;
        border-top-width: 1px;
        border-top-style: dotted;
        border-top-color: #09C;
        background-color: #FFF;
}
.list_info {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 15px;
        color: #333;
        height: 13px;
        border-top-width: 1px;
        border-top-style: dotted;
        border-top-color: #09C;
        background-color: #FFF;
}

.list_title {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 16px;
        color: #333;
        height: 25px;
        padding: 5px;
        font-weight: bold;
        background-color: #E8FBFF;
}
.list_sides {
        background-color: #2298B6;
        width: 15px;
}
.list_botton {
        background-color: #0CF;
        height: 3px;
        border-bottom-width: 1px;
        border-bottom-style: double;
        border-bottom-color: #09F;
}
.list_table {
        margin-top: 30px;
        border: 3px double #0CF;
}

#top a {
        color: #666;
}
#top a:hover {
        color: #0CC;
        text-decoration: none;
}
#lst_div {
        padding-top: 5px;
        padding-bottom: 5px;
}

.wikiTitleBox {
        font-size: 14px;
        height: 30px;
        width: 880px;
        margin: 0 0 0 15px;
        background-repeat: repeat-x;
        background-image: url(http://mepopedia.com/group/ncnu-dfll/images/wiki-1.png);
        padding-top: 2px;
        background-color:#EFF;
        border-radius: 10px;
}
.wikiTitle {
        font-size: 16px;
        height: 30px;
        font-family: Georgia, "Times New Roman", Times, serif;
        color: #FFF;
        font-weight: bold;
        margin-top: 6px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        
}
.ForumTitleBox {
        background-image: url(http://mepopedia.com/group/ncnu-dfll/images/wiki-1.png);
        background-repeat: repeat-x;
        height: 30px;
        width: 880px;
        margin-left: 15px;
        padding-top: 2px;
}
.QWTitleBox        {
        background-image: url(http://mepopedia.com/group/ncnu-dfll/images/wiki-2.png);
        background-repeat: repeat-x;
        height: 50px;
        width: 880px;
        color: #FFF;
        font-family: Arial, Helvetica, sans-serif, "微軟正黑體";
        padding-top: 10px;
        font-weight: bold;
        margin-left: 15px;
        border-radius: 10px;
}
.QWHeading1 {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 18px;
        color: #09C;
        border-bottom-width: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #09F;
        font-weight: bold;
        background-image: url(http://mepopedia.com/group/ncnu-dfll/images/w4.gif);
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 50px;
        padding-bottom: 8px;
        padding-top: 2px;
}
.map{
        margin-left: 20px;
}
.QWIndent{
        margin-left:-20px;
}
/* 整體風格設定 */

body {
        margin:0;
        background: #e3e3e3 url(http://mepopedia.com/group/village/imgs/top_bg.jpg) repeat-x;
}

#building {
        max-width: 900px;
        _width:expression((documentElement.clientWidth >928) ? "900px" : "auto");
        margin: auto; border: 3px solid #FFF;
}

/* 基本風格設定 */

a:link, a:visited {
        color: #00468C;
        text-decoration: none;
}

a:hover {
        text-decoration: underline;
        color: #366C00;
}

a:active {
        text-decoration: none;
}

/* 區塊風格設定 */

#top {
        margin: auto;
        width: 900px;
        background: url(http://mepopedia.com/group/village/imgs/top_bg.jpg) repeat-x;
        height: 25px;
        font-size: 12px;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        color: #666;
        padding: 3px;
}
#top a {
        color: #666;
}
#top a:hover {
        color: #0CC;
        text-decoration: none;
}

#wikiheader{
        background: url(http://mepopedia.com/group/ncnu-dfll/images/wiki_top.jpg) no-repeat left;
        height: 75px;
        max-width: 900px;
}

#content{
        margin: auto;
        background-color: #FAFAFA;
        padding: 36px 0 50px;
}

#footer{
        margin: auto;
        background-color: #016da4;
        height: 50px;
        line-height:20px;
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 12px;
        color: #FFF;
        padding-top: 12px;
        padding-right: 5px;
        padding-left: 20px;
        clear: both;
}
#building #footer a {
        color: #6FF;
}
#content .page_table tr td a {
        color: #F90;
}

.wikiTitle {
        margin: 0 15px;
        background: url(http://mepopedia.com/group/ncnu-dfll/images/wiki-1.png) repeat-x;
        background-color:#EFF; /*此處顏色設定建議可移除或設定為類似背景圖色之顏色*/
        border-radius: 10px;
        font: bold 16px/30px Georgia, "Times New Roman", Times, serif;
        color: #FFF;
        text-align: center;
}

#wikitext {
        margin-right: 60px;
        margin-left: 60px;
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 16px;
        line-height: 21px;
        padding: 20px;
        border: 3px double #0CF;
        background-color: #FFF;
}

.list_tatle_title {
        height: 59px;
        background-image: url(http://mepopedia.com/group/village/imgs/list_title.gif);
        background-repeat: no-repeat;
}
.list_content {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 15px;
        height: 13px;
        padding: 5px;
        font-weight: bold;
        border-top-width: 1px;
        border-top-style: dotted;
        border-top-color: #09C;
        border-right-color: #09C;
        border-bottom-color: #09C;
        border-left-color: #09C;
        list-style-image: url(http://mepopedia.com/group/village/imgs/icon_news.gif);
        list-style-position: inside;
        background-color: #FFF;
}
.list_icon {
        background-image: url(http://mepopedia.com/group/village/imgs/icon_news.gif);
        background-repeat: no-repeat;
        background-position: center;
        width: 25px;
        border-top-width: 1px;
        border-top-style: dotted;
        border-top-color: #09C;
        background-color: #FFF;
}
.list_info {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 15px;
        color: #333;
        height: 13px;
        border-top-width: 1px;
        border-top-style: dotted;
        border-top-color: #09C;
        background-color: #FFF;
}

.list_title {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 16px;
        color: #333;
        height: 25px;
        padding: 5px;
        font-weight: bold;
        background-color: #E8FBFF;
}
.list_sides {
        background-color: #2298B6;
        width: 15px;
}
.list_botton {
        background-color: #0CF;
        height: 3px;
        border-bottom-width: 1px;
        border-bottom-style: double;
        border-bottom-color: #09F;
}
.list_table {
        margin-top: 30px;
        border: 3px double #0CF;
}

#lst_div {
        padding-top: 5px;
        padding-bottom: 5px;
}

.ForumTitleBox {
        background-image: url(http://mepopedia.com/group/ncnu-dfll/images/wiki-1.png);
        background-repeat: repeat-x;
        height: 30px;
        width: 880px;
        margin-left: 15px;
        padding-top: 2px;
}
.QWTitleBox        {
        background: url(http://mepopedia.com/group/ncnu-dfll/images/wiki-2.png) repeat-x;
        height: 50px;
        color: #FFF;
        font-family: Arial, Helvetica, sans-serif, "微軟正黑體";
        padding-top: 10px;
        font-weight: bold;
        margin: 50px 15px 0;
        border-radius: 10px;
}
.QWHeading1 {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 18px;
        color: #09C;
        border-bottom: 1px dotted #09F;
        font-weight: bold;
        background: url(http://mepopedia.com/group/ncnu-dfll/images/w4.gif) no-repeat left center;
        padding: 2px 0 8px 50px;
}
.map{
        margin-left: 20px;
}
.QWIndent{
        margin-left:-20px;
}

.links {
        height: 50px;
        padding: 10px 10px 0 0;
}
.button {
        width: 105px;
        height: 28px;
        float: right;
        margin-right: 2px;
}
.image {width: 105px; height: 28px;}

.edit {
        background:url(/group/ncnu-dfll/images/w3-2.gif);
}
.forum {
        background:url(/group/ncnu-dfll/images/w2-2.gif);
}
.post {
        background:url(/group/ncnu-dfll/images/post-2.gif);
}

.edit a .image {
        background: url(/group/ncnu-dfll/images/w3-2.gif);
}
.forum a .image {
        background: url(/group/ncnu-dfll/images/w2-2.gif);
}
.post a .image {
        background: url(/group/ncnu-dfll/images/post-2.gif);
}

.button a, .button a:link, .button a:visited {
        display:block;
}
.button a:hover .image{
        visibility:hidden; height: 0; width: 0;
}
.edit {background-repeat:no-repeat;}
.button a:hover {visibility:visible; height: 28px; width: 105px;} /*IE6*/
]]> HP 跨瀏覽器相容性網頁設計 Thu, 06 Oct 2011 17:17:14 +0800 http://mepopedia.com/forum/read.php?844,15896,15956#msg-15956 跨瀏覽器 Box Model 實例觀察2：段落 p 在 IE8/IE9/Firefox/Chrome 中預設有上下邊距（margin-top / -bottom），但IE6、IE7沒有 http://mepopedia.com/forum/read.php?844,15896,15956#msg-15956
依 W3C 官方定義，段落 <p> 的前後會有預設「一個字體大小（font-size）= 1em」的 margin，但在實例觀察中， IE6 和 IE7 沒有這個預設 margin。

若習慣於 IE6/IE7 的設計，沒有考慮到官方定義的預設段落 margin，就會出現下圖中頁尾部份的多餘空隙（紅框中的灰色部份）。在紅框中是以段落 <p> 所構成的一個空白行，因為預設的上下邊距，所以整個段落（紅框部份）有三行行高。但依 CSS Box Model 的官方定義，段落（任何元素）的背景（background）不包括邊距，所以淡藍色（#FAFAFA）的背景顏色無法出現在下邊距（margin-bottom），形成三不管地帶。最後這個三不管地帶由於沒有元素管轄，所以就繼承了 <body> 的背景顏色（#E3E3E3）。

預設段落邊距（margin）的圖示（以 Firefox6 為例）：

<p> ... </p>
]]> HP 跨瀏覽器相容性網頁設計 Tue, 27 Sep 2011 05:20:04 +0800 http://mepopedia.com/forum/read.php?844,15917,15917#msg-15917 [CSS] BOX Model (盒子模型) http://mepopedia.com/forum/read.php?844,15917,15917#msg-15917
  1. 1. 相異瀏覽器：
  2. 2. 問題描述
  3. 3. 造成的影響
  4. 4. 問題分析
  5. 5. 跨瀏覽器問題整理表格
  6. 6. 解決方法：
  7. 7. 補充說明
  8. 7.1 無障礙空間
  9. 7.2 搜尋引擎最佳化(SEO)
  10. 8. 參考文章：
  11. 9. 相異瀏覽器
  12. 10. 問題描述
  13. 11. 解決方法
  14. 11.1 在 HTML 中使用圖片標籤
  15. 11.2 在 CSS 中使用背景屬性（background）
  16. 12. 相異瀏覽器
  17. 13. 問題描述
  18. 13.1 圖片無置於表格中測試
  19. 13.2 圖片置於表格中測試
  20. 14. 解決方法
  21. 14.1 變更vertiical-align的值
  22. 14.2 改變區塊屬性
  23. 14.3 表單風格（list-style）
  24. 14.3.1 將清單項目的開頭符號設為圖像時，其垂直位置會偏離
  25. 14.4 文字屬性font
  26. 14.4.1 使用%來設定大小的文字，其顯示狀況會因瀏覽器而異
  27. 14.5 浮動屬性(Float)
  28. 14.5.1 在IE中，用了%設定寬度之float多欄式版面會無法正常顯示
  29. 14.6 段落標籤 p
  30. 14.6.1 段落標籤(p)預設前後邊距問題
  31. 14.7 清單標籤(ul ol li)
  32. 14.7.1 IE瀏覽器瀏覽器下列表式型無效的問題
  33. 15. 標籤
  34. 15.1 表格標籤(table)
  35. 15.2 清單標籤(ul ol li)
  36. 15.3 段落標籤 p
  37. 15.4 圖像標籤 img
  38. 15.4.1 圖像下方產生間隙
  39. 15.4.2 PNG 透明圖片支援
  40. 15.4.3 alt、title使用上的不同
  41. 16. 屬性
  42. 16.1 浮動屬性(Float)
  43. 16.2 背景屬性（background）
  44. 16.3 邊框屬性（border）
  45. 16.4 文字屬性font
  46. 16.5 行高（line-height）
  47. 16.6 表單風格（list-style）
  48. 16.7 邊距（margin）
  49. 16.8 內距（padding）
  50. 16.9 定位屬性（position）
  51. 16.10 垂直置齊（vertical-align）
  52. 17. 雙倍邊距(Double Margin)問題
  53. 17.1 解決方法：
  54. 17.2 原理：
  55. 17.3 雙倍邊距(Double Margin)問題整理
  56. 18. CSS 部分
  57. 19. [color=#CC3300]1.改變底色的做法/文字居中排法[/color]
  58. 20. [color=#CC3300]2.改變文字顏色的做法[/color]
  59. 21. 一、漸層語法簡介
  60. 22. 二、各瀏覽器漸層語法說明
  61. 22.1 1.不同底色的呈現
  62. 22.2 2.各瀏覽器漸層語法
  63. 23. 三、跨瀏覽器綜合語法
  64. 24. [解說一] 內距：PADDING

[color=#990000]一、BOX Model (盒子模型)觀念說明[/color]



Box Model (盒子模型) 是CSS排版裡一個重要的觀念。他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。也關係著是否能成功的透過CSS表現完美的網頁排版設計。

一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)

一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。

所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding 。

換句話說，一個元素真正佔用的視覺空間(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範。

[img]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/img]


不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。




以下是盒子與盒子(元素與元素)之間的關係



========================================================================

[color=#990000]二、實例說明：[/color]




24. [解說一] 內距：PADDING



以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:

主內容 #content 的設定則為
#content { padding: 30px; //文字內容與#content之間的距離 font-size: 14px; //字體大小14px line-height: 2em; //行間為兩個字高 }
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式

如圖

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]]]> JinJin 跨瀏覽器相容性網頁設計 Sat, 24 Sep 2011 12:02:08 +0800 http://mepopedia.com/forum/read.php?844,15897,15897#msg-15897 [CSS] 捲軸 overflow 針對 IE 的跨瀏覽器使用：設定 width、加上 overflow-y: hidden、設為 block http://mepopedia.com/forum/read.php?844,15897,15897#msg-15897
例如：
pre{ overflow: auto; width: 700px; }
2. 若只有水平捲軸，對 IE 瀏覽器請將垂直捲軸（overflow-y）移除。

IE 和 Firefox 比較：IE 的水平捲軸會「算在區塊裡面」，所以造成本來沒有的垂直捲軸又跑出來。若要解決，請將垂直捲軸設為隱藏： overflow-y: hidden。



參考資料：
http://remysharp.com/2008/01/21/fixing-ie-overflow-problem/


3. 有些HTML標籤要設為 display:block：例如 <xmp>

在 IE8 中會把 <xmp>（功能是把HTML tag視為純文字，全不解讀）視為 inline 元素，此時 overflow 的功能會失效，故需將 <xmp> 設為 block。

例如： 
xmp{
    overflow: auto;
    width: 700px;
    display: block;
}


修正IE下使用CSS属性overflow的bug
http://www.lunaticsun.com/article/ie-overflowbug
http://blog.csdn.net/slalx/article/details/3073100]]> HP 跨瀏覽器相容性網頁設計 Fri, 23 Sep 2011 01:49:34 +0800 http://mepopedia.com/forum/read.php?844,15896,15896#msg-15896 跨瀏覽器 Box Model 實例觀察：table、p、backgroud 與 margin（觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13） http://mepopedia.com/forum/read.php?844,15896,15896#msg-15896 暨大外文系友會 - 生涯經驗分享
觀察時間：2011年9月23日
觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13

1. IE6 眼中的系友會百科



簡要觀察：頁面右側有多餘的空隙。（此空隙由當下區塊所繼承的 background-color 填滿）

2. IE7



簡要觀察：頁面右側有多餘空隙的問題沒有了，但出現表格（table）寬度超過主文區塊（#wikitext）的問題。

Firefox6 眼中的系友會百科（此結果和 IE8、Chrome 類似）



簡要觀察：
1. table 與主文區塊（#wikitext）相衝突。（不是 table 太寬就是 #wikitext 太窄）
2. footer（上方）部份有多餘空隙。

HTML 佈局簡要示意
<body> <div id="building"> ... <div id="content_list"> ... <div id="wikitext"> ... <table>...</table>（寬度過大的表格） <div> <p><br/></p>（造成頁尾有灰色空隙的段落標籤） </div> <div id="footer">...</div> </div> </body>
分析大網：
1. IE6 對寬度（width）的定義不一樣（事實上把 width 當作 min-width）
IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。也就是說，IE6 把「寬度」看作「最小寬度」，若有需要會自動延伸加大。（而實際上 IE6 對真正的 CSS 語法min-width 卻又不支援）

2. 標籤 <p> 的定義：IE6 和「其他」不一樣
W3C 官方定義 <p> 的上下會有預設「一個字體大小 font-size」的 margin，但 IE6~IE7 不會有預設 margin。

3. background 和你想的不一樣：background 不包括 margin
Firefox 中 footer 上方的灰色空隙就是 <p> 的 margin 所造成的空隙，而這個空隙不歸 <p> 的 background 管，所以就變成是最外面的 body 管。變成是由 body 的背景顏色來決定。]]> HP 跨瀏覽器相容性網頁設計 Thu, 22 Sep 2011 23:54:29 +0800 http://mepopedia.com/forum/read.php?844,15508,15508#msg-15508 [基礎知識] 向後相容的 Quirks Mode (接縫模式) 與 DOCTYPE (文件型態) 宣告意義與特性整理 http://mepopedia.com/forum/read.php?844,15508,15508#msg-15508
此文件編寫目的為給視傳相關科系大一新生之「網頁設計」課程作為相關教材（當然，對一般對網頁設計有興趣的朋友也是相當適合的）。此文的內容提供 DOCTYPE 宣告語法的介紹，編寫目的為讓讀者了解宣告與不宣告 DOCTYPE 的差異與避免讓網頁進入當初為了相容舊型瀏覽器而生的「接縫模式 / 轉折模式」Quirks Mode。

一般視傳相關科系的學生（或甚至老師）的學習要點多重於「視覺」與「設計」部份，而容易對一些「語法」或「規則」部份有所忽略。「DOCTYPE」即為一般常忽略的一個要點，也讓許多網頁會進入「Quirks Mode」。也因此，宣告與不宣告之間，在不同瀏覽器的呈現之下就往往產生很不一樣的結果。

目前文章編寫中，請見此主題之百科介紹：http://mepopedia.com/?page=866

二、DOCTYPE 的宣告

有關 DOCTYPE 宣告的部份，建議可以下列 HTML5 新制定的語法宣告。這個語法不僅可以讓網頁支援最新的 HTML5 語法，也可相容 IE6、IE7、Max IE5等舊型瀏覽器，是一個既簡潔又可相容新、舊瀏覽器的語法：

<!DOCTYPE html> (HTML 5 新式宣告) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> (HTML 4.01 舊式宣告)
不過比較仔細的同學可能會有這樣的疑惑：新式宣告裡面什麼也沒有，沒有寫 HTML 4.01 或 XHTML 1.0 等資訊，那瀏覽器怎麼知道是用什麼模式讀取網頁？又或者，舊型瀏覽器開發的時候又沒有 HTML5，它怎麼知道 HTML5 是用這樣的宣告？

就我的了解是這樣的。在文件型態（DOCTYPE）的宣告原則中，因為已假設會使用 DOCTYPE 的網頁設計者是「內行人」，也就是說知道要宣告 DOCTYPE 才會進入使用官方語法的「標準模式」才會使用，所以就算宣告得比較不完整或比較簡略，也都沒有問題，都會進入「標準模式 Standard Mode」。

所以，對舊型瀏覽器而言，它雖然不知道什麼是 HTML5，但還是會進入標準模式（儘管是使用 HTML4.01）。而對新式瀏覽器而言，當然就更沒有問題，直接進入支援 HTML5 的標準模式了。

最後，提了這麼多的「標準模式」倒底是什麼呢？基本上就是相較於 Netscape 和 Internet Explorer 還在大戰時的「一套標準各自解讀」時期，各家舊瀏覽器的「各自解讀」模式，到後來約 2000年推出完整支援 CSS (CSS Level1) 的 Mac IE5，才開始支援 HTML/CSS 標準語法的「標準模式」。但，進入了大家（勉為其難）開始支援標準模式的時期，那舊時代的網頁怎麼辦？所以就發明了一種模式叫作 Quirks Mode，專門用以處理舊式設計規則的網頁。因為舊式網頁當然沒有 DOCTYPE 的宣告，所以，「不要宣告 DOCTYPE」就會進入屬於舊瀏覽器模式的 Quirks Mode。

最後的最後要提醒在設計網頁時要記得加上 <!DOCTYPE html> 的宣告，這樣網頁才不會被歸類為「舊時代的產物」，也才能讓 CSS 的相關語法「正確／正常」地將功能呈現。


相關詳細的說明與相容性整理可見維基百科（英文）：
http://en.wikipedia.org/wiki/Quirks_mode#Comparison_of_document_types

三、

1. HTML 的三種文件模式宣告：Quirks Mode、Standard Mode、Almost Standard Mode

Quirks Mode 的產生原因

2. 文件型態宣告 (DOCTYPE Declaration) 規則說明

3. 錯誤範例與正確實例


Quirks Mode 的翻譯：

Quirks Mode 會用 quirk 這個字應該是取自其動詞用法「使形成皺摺」以及建築用語「溝槽」，指兩面牆面或兩個凸面之間的接縫，更古早一點有這種說法「a quirk of fate 命運的轉折」。
或許可以翻作或者「接縫模式」或者「轉折模式」？
(by gustav)]]> HP 跨瀏覽器相容性網頁設計 Mon, 05 Sep 2011 14:30:39 +0800