IE 上 css 设置透明度造成 input 内光标错误的有关问题
日期：2014-05-17 浏览次数：20648 次
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>
?
?
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
