Firefox2中輸入框丟失光標(biāo)bug的解決方法
更新時(shí)間:2008年05月16日 22:50:40 作者:
在Firefox2中某些情況下輸入框雖然可以輸入,但在獲取焦點(diǎn)時(shí)沒有文本輸入光標(biāo)的顯示,這個(gè)是非常惡心的bug,非常容易讓表單使用者有一種不能輸入的錯(cuò)覺,即使后來嘗試知道可以輸入,但也無法判斷光標(biāo)定位在哪兒。
雖然慶幸的是Firefox3中解決了這個(gè)bug,但Firefox3還在beta階段,取代Firefox2還是需要一些時(shí)間的,下面就來仔細(xì)說一下這個(gè)問題:
一、樣式為{position:absolute;}的容器中的表單輸入框在樣式為類似{overflow:auto;}的容器區(qū)域中失去光標(biāo)
可以通過例一到例六來了解最常見的情況。
如果想整個(gè)body都出現(xiàn)失去光標(biāo),可以設(shè)置html和body兩個(gè)容器,請(qǐng)看示例。包括舉例的overflow:auto在內(nèi)能引起該Bug的overflow屬性共有:
overflow:auto
overflow-x:auto;
overflow-y:auto;
overflow:scroll;
overflow-x:scroll;
overflow-y:scroll;
overflow-x:hidden;
overflow-y:hidden;
除了避免使用overflow屬性的其他解決方案:
利用overflow:hidden代替產(chǎn)生bug的oveflow屬性
在具有上述overflow屬性的容器中加入position:relative,請(qǐng)看實(shí)例。
在positon:absolute的容器上加入同樣的oveflow屬性,同時(shí)注意在頁面出現(xiàn)的順序,見例四
為使用能產(chǎn)生bug的oveflow屬性的容器選擇合適的標(biāo)簽,比如fieldset,見例六。
二、樣式為{position:absolute;}的容器中的表單輸入框在iframe容器區(qū)域中失去光標(biāo)
可以通過例七來了解這個(gè)情況。IE6中為了解決下拉列表級(jí)別過高問題,往往需要用iframe來遮蓋它,偶爾疏忽忘記做瀏覽器限定就有可能導(dǎo)致上面的問題。
現(xiàn)在看來Firefox2對(duì)iframe的處理bug還真不少,比如以前就發(fā)現(xiàn)了Firefox返回時(shí)Iframe的顯示Bug。
一、樣式為{position:absolute;}的容器中的表單輸入框在樣式為類似{overflow:auto;}的容器區(qū)域中失去光標(biāo)
可以通過例一到例六來了解最常見的情況。
如果想整個(gè)body都出現(xiàn)失去光標(biāo),可以設(shè)置html和body兩個(gè)容器,請(qǐng)看示例。包括舉例的overflow:auto在內(nèi)能引起該Bug的overflow屬性共有:
overflow:auto
overflow-x:auto;
overflow-y:auto;
overflow:scroll;
overflow-x:scroll;
overflow-y:scroll;
overflow-x:hidden;
overflow-y:hidden;
除了避免使用overflow屬性的其他解決方案:
利用overflow:hidden代替產(chǎn)生bug的oveflow屬性
在具有上述overflow屬性的容器中加入position:relative,請(qǐng)看實(shí)例。
在positon:absolute的容器上加入同樣的oveflow屬性,同時(shí)注意在頁面出現(xiàn)的順序,見例四
為使用能產(chǎn)生bug的oveflow屬性的容器選擇合適的標(biāo)簽,比如fieldset,見例六。
二、樣式為{position:absolute;}的容器中的表單輸入框在iframe容器區(qū)域中失去光標(biāo)
可以通過例七來了解這個(gè)情況。IE6中為了解決下拉列表級(jí)別過高問題,往往需要用iframe來遮蓋它,偶爾疏忽忘記做瀏覽器限定就有可能導(dǎo)致上面的問題。
現(xiàn)在看來Firefox2對(duì)iframe的處理bug還真不少,比如以前就發(fā)現(xiàn)了Firefox返回時(shí)Iframe的顯示Bug。
相關(guān)文章
scrollWidth,clientWidth與offsetWidth的區(qū)別
scrollWidth,clientWidth與offsetWidth的區(qū)別...2007-08-08
Zen Coding 快速編寫HTML/CSS代碼的實(shí)現(xiàn)
在本文中我們將展示一種新的使用仿CSS選擇器的語法來快速開發(fā)HTML和CSS的方法。它由Sergey Chikuyonok開發(fā)。2011-01-01
用CSS開發(fā)時(shí)髦的導(dǎo)航欄圖例教程
除非限制你自己只做單個(gè)頁面的網(wǎng)站,否則你都需要導(dǎo)航欄。事實(shí)上,導(dǎo)航欄是任何網(wǎng)站設(shè)計(jì)中最主要的部分之一,如果希望用戶很容易的在你的站點(diǎn)移動(dòng),導(dǎo)航欄的設(shè)計(jì)需要大量的思考。2008-05-05
flash幻燈片需要先激活A(yù)ctiveX控件才能使用的又一個(gè)辦法
flash幻燈片需要先激活A(yù)ctiveX控件才能使用的又一個(gè)辦法...2007-11-11
動(dòng)態(tài)更改網(wǎng)頁HTML元素(對(duì)象)內(nèi)容
動(dòng)態(tài)更改網(wǎng)頁HTML元素(對(duì)象)內(nèi)容...2006-11-11
用javascript來控制 鏈接的target 屬性的代碼
用javascript來控制 鏈接的target 屬性的代碼...2007-11-11

