難以發現的 CSS 問題

睡蓮 — 2009-04-06T13:44:40+02:00

類別: 語言集
來源: (池水間)話說昨天在Opera瀏覽器下為池水間進行網站優化和代碼改良時，間隔了一段長時間才去打開firefox檢視一下網站，這下不看猶自可，一看嚇了一跳，在firefox下的池水間變得面目全非，馬上打開其他瀏覽器查看，結果safari也是和firefox一樣有問題，只有opera和IE都正常，這是怎麼回事了？

從firefox和safari出現的徵狀來看，似乎是瀏覽器在解析CSS語法上出問題，打開CSS查看了語法，來回檢查了好幾遍，偏偏就沒有找到錯漏之處，連CSS檔的編碼也是正確的utf8。正當百思不得其解之際，我的視線不經意地落在頁腳左邊W3C的CSS驗證連結上，頓時靈光一閃，利用這驗證工具查看，在W3C驗證結果頁面下的CSS立時現形。

CSS有什麼問題？給出以下例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-tw" lang="zh-tw">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title></title>
<style type="text/css">
 /*<![CDATA[*/
.example1 {    font-size:20px;    color:#1dab5c;    }
.example2 {　　font-size:12px;　　color:#ff0000;　　}
 /*]]>*/
</style>
</head>
<body>
<p class="example1">字體較大，為綠色字</p>
<p class="example2">字體較小，為紅色字</p>
</body>
</html>

從上面的橘色CSS語法中，能看出哪裡有錯誤的地方嗎？如果給個提示，只有 .example2 的那一行語法顯示出來不正常，那麼又能不能看出錯誤在哪裡？

請分別在firefox和IE下，各點按這裡，將上面語法複製進實驗板去觀看結果。

這是一般人用肉眼也不易發現得到的問題，這也是我近來才發現這個鮮為人知郤又存在的問題。好在利用W3C驗證工具，CSS就無所遁形：

沒錯，圖中的紅框就是CSS裡面的空格，會以亂碼呈現，就是出在這些空格是用全形，正常的空格應該是用半形的。

依照上面的錯誤頁面上的行數提示，逐一把空格找出來修正，再把CSS送去W3C驗證，最後熟悉的綠標題背景頁面終於再度呈現回來了。

睡蓮‧池水間 :: 文章

難以發現的 CSS 問題