IE 下 css 设置透明度造成 input 内光标异常的问题

zTree v3.0 正式版发布后，有朋友反映 IE 下修改节点名称时，如果输入的字符串较长，超过了输入框可显示的长度后，用键盘左右键前后移动光标会出现异常——光标到达顶端后，文字并不会跟着一起移动！（此问题由：hxcy001 朋友提供）

个人感觉这应该算是个比较严重的 bug 了，一开始怀疑是 js 的事件机制出现了问题，导致键盘操作异常，但反复排查后没有发现 js 的明显问题，进一步排查发现是 css 造成的，并且最终定位到了： filter:alpha(opacity=80)

找到源头就好办了，开始测试吧，测试结果多少还是令我有些诧异：

1、对于 input 或 textarea，如果设置了这个透明度的样式，即使设置值为100，都会出现光标操作的异常。

受影响的IE版本：6、7、8

2、对于 input 或 textarea 的父容器，如果设置了这个透明度的样式，即使设置值为100，都会出现光标操作的异常。

受影响的IE版本：8

如果再去深入研究，估计要看内核了，这个就算了，不过好消息是因为 IE9 的内核改变，因此没有这个问题。

总结：大家在使用 filter:alpha(opacity=80) 的时候要多多注意了。同时 zTree 将在 v3.1 发布时修正这个问题。这样在 IE6、7、8 下被选中的节点就没有半透明效果了。

这里特别感谢 hxcy001 和 czwlucky 两位朋友的大力协助。同时也希望大家能一起讨论。

测试代码如下：

<!DOCTYPE html>
<HTML>
 <HEAD>
  <TITLE>test</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 </HEAD>

 <BODY>
  [1] input 加 filter: <input type="text" style="filter:alpha(opacity=100)" value="input 加 filter; input 加 filter; input 加 filter"/><br/><br/>
  [2] input 的 父 加 filter: <div style="filter:alpha(opacity=100)"><input type="text" value="input 的 父 加 filter; input 的 父 加 filter; input 的 父 加 filter"/></div><br/><br/>

  [3] textarea 加 filter: <textarea style="filter:alpha(opacity=100); overflow:hidden; height: 15px;" >textarea 加 filter; textarea 加 filter; textarea 加 filter</textarea><br/><br/>
  [4] textarea 的 父 加 filter: <div style="filter:alpha(opacity=100)"><textarea style="overflow:hidden; height: 15px;" >textarea 的 父 加 filter; textarea 的 父 加 filter; textarea 的 父 加 filter</textarea></div>
 </BODY>
</HTML>

IE 下 css 设置透明度造成 input 内光标异常的问题

相关推荐