Firefox2下光标丢失Bug

说明|评论

样式为{position:absolute;}的容器中的表单输入框在样式为类似{overflow:auto;}的容器区域中或者iframe容器区域中失去光标

例一：
姓名
密码
性别
内容
<div style="overflow:auto;height:160px;">
    <table style="position:absolute;">
        ...
            <input name="username" type="text" />
        ...
    </table>
</div>

表格中的表单输入框获取焦点后全部没有光标，但是可以输入。

例二：
姓名
密码
性别
内容
<div style="overflow:auto;height:160px;">
    <table style="position:absolute;">
        ...
            <input name="username" type="text" />
        ...
    </table>
</div>

位于div容器区域上（蓝色部分）的表单输入框没有光标，div容器区域之外的输入框有光标，最明显的是密码这个输入框，有下半个光标。

例三：
姓名
密码
性别
内容
<div style="overflow:auto;height:160px;"></div>
<table style="position:absolute;top:1em;left:1em;">
    ...
        <input name="username" type="text" />
    ...
</table>

这个例子和例一相比仅是标签的结构不同，但是{overflow:auto;}的影响是一样的。

例四：
姓名
密码
性别
内容
<div style="overflow:auto;height:160px;"></div>
<div style="position:absolute;overflow:auto;">
	<table>
	    ...
	        <input name="username" type="text" />
	    ...
	</table>
</div>

看看这个例子似乎提供了例一的一种解决方案。但是去掉第二个div的overflow:auto;光标消失

例五：
姓名
密码
性别
内容
<div style="overflow:auto;">
	<table>
	    ...
	        <input name="username" type="text" />
	    ...
	</table>
</div>
<div style="overflow:auto;height:160px;"></div>

相比例四，两者的区别就是div出现的顺序不同，但是这个时候输入框失去了光标。

例六：
个人信息
姓名
密码
性别
内容
<fieldset style="overflow:auto;height:160px;">
    <legend>个人信息</legend> 
    <table style="position:absolute;">
 	    ...
	        <input name="username" type="text" />
	    ...
	</table>
</fieldset>

和例一相比也就是容器标签不同，fieldset不会造成光标的丢失,或许还有其他标签也有这种情况。

例七：
姓名
密码
性别
内容
<iframe style="height:160px;"></iframe>
<table style="position:absolute;top:1em;left:1em;">
    ...
        <input name="username" type="text" />
    ...
</table>

当通过position:relative让容器位于iframe所在区域，依旧会导致光标丢失。