| MozTW 討論區 https://forum.moztw.org/ |
|
| [問題]各瀏覽器對Fixed的支援程度？ https://forum.moztw.org/viewtopic.php?f=13&t=10276 |
第 1 頁 (共 1 頁) |
| 發表人: | wini [ 2005-08-31, 23:23 ] |
| 文章主題 : | [問題]各瀏覽器對Fixed的支援程度？ |
（前言：本篇文章相當長，主要是在問 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 |
|
| 發表人: | wini [ 2005-09-01, 16:34 ] |
| 文章主題 : | |
今天花了兩小時修了一下 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 有超連結可選的， 應該是很少吧…（汗 |
|
| 第 1 頁 (共 1 頁) | 所有顯示的時間為 UTC + 8 小時 |
| Powered by phpBB® Forum Software © phpBB Group https://www.phpbb.com/ |
|