測試頁面源代碼
我們有以下測試文件 test.html:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
5 <title>Test</title>
6 </head>
7 <body>
8 <div>
9 <select size="5" disabled="disabled">
10 <option value="C1">Black</option>
11 <option value="C2">DarkCyan</option>
12 <option value="C3" selected="selected">DarkRed</option>
13 <option value="C4">DarkMagenta</option>
14 </select>
15 <select size="5">
16 <option value="C1">Black</option>
17 <option value="C2">DarkCyan</option>
18 <option value="C3" selected="selected">DarkRed</option>
19 <option value="C4">DarkMagenta</option>
20 </select>
21 <input type="text" />
22 </div>
23 </body>
24 </html>
然后看看這個 HTML 文件在主流瀏覽器中的表現。
Opera
可以看出，顯示效果非常好，disabled 的控件背景是灰色的，正確地標示出 selected 的項目。
Mozilla Firefox
顯示效果也很好，disabled 的控件前景是灰色的，也正確地標示出了 selected 的項。
Google Chrome
顯示效果非常不好，disabled 的控件前景是灰色的，但是 selected 項的內容悲劇了。
Apple Safari
顯示效果也很好，disabled 的控制前景是灰色的，selected 的項目也被正確地標示出來了。
Microsoft IE 的各種版本
Microsoft IE 5.5、IE 6 和 IE 7 的顯示效果基本上是一樣的，都相當不錯，disabled 的控件前景是灰色的，也正確標示出 selected 的項目。這三個版本的瀏覽器已經過時了，不能算是主流的瀏覽器，但是 IE 6 在我國應該還是有相當的市場的。
IE 8 和 IE9 悲劇了，disabled 的控件前景是灰色的，這很好。但是 selected 的項目沒有被標示出來，這是個很嚴重的 bug。這兩個版本瀏覽器是主流的瀏覽器，Windows XP 最高只能安裝到 IE 8，Windows Vista 最高也只能安裝到 IE 9。
IE 10 的顯示效果也非常好，disabled 的控件背景是灰色的，正確標示出 selected 的項目。不過 IE 10 需要 Windows 8 操作系統才能安裝。
總結
Microsoft IE 5.5、IE 6、IE7、IE 10、Mozilla Firefox、Apple Safari 和 Opera 等瀏覽器對 HTML select 元素的 disabled 屬性支持都很不錯。而 IE 8、IE 9 和 Chrome 都有 bug，不能很好支持。不知道有沒有辦法在 HTML 源代碼補救這一 bug。
補救辦法
將 test.hmtl 改為如下所示：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
5 <link href="Main.css" type="text/css" rel="stylesheet" />
6 <title>Test</title>
7 </head>
8 <body>
9 <div>
10 <select size="5" disabled="disabled">
11 <option value="C1">Black</option>
12 <option value="C2">DarkCyan</option>
13 <option value="C3" selected="selected" class="selected">DarkRed</option>
14 <option value="C4">DarkMagenta</option>
15 </select>
16 <select size="5">
17 <option value="C1">Black</option>
18 <option value="C2">DarkCyan</option>
19 <option value="C3" selected="selected">DarkRed</option>
20 <option value="C4">DarkMagenta</option>
21 </select>
22 <input type="text" />
23 </div>
24 </body>
25 </html>
其中 Main.css 如下所示：
1 option.selected {
2 color: White;
3 background-color: Cyan;
4}
這樣在 IE 8、IE 9 和 Chrome 18.0 瀏覽器中也能正常顯示了，如下所示：
