|
秦歌(YanKaven) 的站點(diǎn)：http://dancewithnet.com/
在Firefox2中某些情況下輸入框雖然可以輸入，但在獲取焦點(diǎn)時(shí)沒(méi)有文本輸入光標(biāo)的顯示，這個(gè)是非常惡心的bug，非常容易讓表單使用者有一種不能輸入的錯(cuò)覺(jué)，即使后來(lái)嘗試知道可以輸入，但也無(wú)法判斷光標(biāo)定位在哪兒。雖然慶幸的是Firefox3中解決了這個(gè)bug，但Firefox3還在beta階段，取代Firefox2還是需要一些時(shí)間的，下面就來(lái)仔細(xì)說(shuō)一下這個(gè)問(wèn)題：
一、樣式為{position:absolute;}的容器中的表單輸入框在樣式為類(lèi)似{overflow:auto;}的容器區(qū)域中失去光標(biāo)
可以通過(guò) 例一到例六 來(lái)了解最常見(jiàn)的情況。
如果想整個(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í)注意在頁(yè)面出現(xiàn)的順序，見(jiàn) 例四
- 為使用能產(chǎn)生bug的oveflow屬性的容器選擇合適的標(biāo)簽，比如fieldset，見(jiàn) 例六。
二、樣式為{position:absolute;}的容器中的表單輸入框在iframe容器區(qū)域中失去光標(biāo)
可以通過(guò) 例七 來(lái)了解這個(gè)情況。IE6中為了解決下拉列表級(jí)別過(guò)高問(wèn)題，往往需要用iframe來(lái)遮蓋它，偶爾疏忽忘記做瀏覽器限定就有可能導(dǎo)致上面的問(wèn)題。
現(xiàn)在看來(lái)Firefox2對(duì)iframe的處理bug還真不少，比如以前就發(fā)現(xiàn)了Firefox返回時(shí)Iframe的顯示Bug。
本文鏈接：http://www.95time.cn/tech/web/2008/5491.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
