（前言：本篇文章相當長，主要是在問 fixed 的定位問題，
建議各位看完第一段後直接開文中的超連結來研究比較快，
因為基本上後面的部分都是在說些廢話。）

嗯，事情是這樣子的，最近我想到了用 position:fixed; 時，
也能讓使用鍵盤的人輕鬆地使用的寫法。（使用 focus 這樣）
不過實作時發現到在特定情況下，放大縮小字體會出問題…
（抱歉我實在不太熟 W3C 的 CSS 文件該怎麼看才好才發問的）

該實驗中的網頁，目前只能在 Mozilla 上正常使用。
CSS的檔案

要滿足發生問題的條件，就是進去後什麼都不要碰，
（或者是按 Ctrl 加 F5 重讀一下網頁）
按幾下 Ctrl 及 + 號來放大字體就會發現問題了，
問題就是右方的那些選單會擠在一起！
這問題在按了 Ctrl 加 數字0 後更明顯，
也就是說它們不會按照所指定的 top 位置來放置自己，
我右方那個超連結選單的 top 的位置是用 em 為單位的，
照理說應該是要確實地配合字體縮放而移動其位置的，
但是卻因為不知名的原因而亂移動。

要避免這個問題發生，
就是先用滑鼠鼠標或鍵盤游標把那些超連結先 hover 和 focus 過一次，
這樣子不管字體怎麼變都不會有問題，
但是一定要這樣子才不會有問題的問題是出在哪兒我並不清楚。

我實驗過了把跟右邊超連結同位階，
但被用 z-index 藏到下方的 a 元素給用 display:none; 隱藏，
或是將該 a 元素改成以 position:relative; 來表示，
不過兩者依舊是無法解決該問題，
所以我就在想會不會是瀏覽器沒把 fixed 定位的元素給處理好？
總之希望有經驗的人能告訴我是哪兒有問題，
謝謝。

（另外因為是用 MS-DOS 批次檔 batch file ，
來合成含有 BOM 的 UTF-8 的 HTML 檔案之故，
所以丟去 HTML Validator 時會發生不明字元的錯誤，
這點我正在找非 DOS 的合成方案來處理中。）

其實還有個蠻糟糕的 hover 跟 focus 互衝突的問題就是了，
試著用滑鼠鼠標去滑過非原始的超連結並往左移開滑鼠，
然後用鍵盤按 Tab 選一選會發現 focus 的效果竟然失效了…
（比如說用滑鼠去點取首頁所拉出的 Language 超連結，
並向左滑開動滑鼠改用鍵盤按 Tab 鍵試試，本來在首頁中，
會有許多個超連結的卻無法被移動到最上層來…）

----
額外小資訊：
element{opacity:[0~1];}
回覆主題 Pure CSS Tooltip
[CSS]radio仿單選select

今天花了兩小時修了一下 CSS ，
現在應該是沒有問題了，
有人有興趣的話，
要測試或拿去用都行，
不過原始碼的部分我還沒做修整會有點亂就是。

這是舊版的有問題的 HTML 跟 CSS 的檔案的壓縮檔
請別問我到底哪裡有問題… orz

這是新版的已修正問題的 HTML 跟 CSS 的檔案的壓縮檔，歡迎使用。

【補充：你可以怎麼玩這個網頁】
一、用各家瀏覽器來玩
　→除了 Mozilla 以外，
　　支援 CSS 的都不能正常顯示 QQ （正在想辦法處理中）
二、丟進 W3C HTML Validator 來玩
　→因為是用 MS-DOS 的批次檔來合成含 BOM 的 UTF-8 ，
　　所以會發生因為參雜不明字元的錯誤而不能通過，
　　目前正在讀 Apache Ant 這軟體的說明期望能解決中。 QQ
三、放大縮小字體來玩
　→因為將部分的 position:fixed; 改成 position:absolute; ，
　　所以目前是沒啥問題了。
四、用滑鼠在右方的選單移過來移過去地玩
　→ float 跟 fixed 真的很神奇，另外建議字體放大點，
　　大到會讓 SiteMap 內的項目往下擠試試，
　　之前的版本會因為移到跟別的項目重疊的部分而跳掉，
　　新版的不會有這問題了。
五、用 Tab 鍵
　→話說一般人看到那種網頁會知道按 Tab 有超連結可選的，
　　應該是很少吧…（汗