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>
分享到:
相关推荐
CSS透明度定义。解决各种浏览器,不同版本的透明度问题。
分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果,始终显示标签label,并显示 placeholder(占位符)文本。 演示地址:...
iecss3.htc css3圆角支持文件
IE兼容CSS3,一句JS可以解决CSS3兼容问题
解决ie下面的css3的兼容问题,直接在使用css3的代码中载入就行了。
“opacity”声明用来设置一个元素的透明度:层、文字、图片等…一个opacity的值为1的元素是完全不透明的,反之,值为0是完全透明的,看不见的。1到0之间的任何值都表示该元素的透明程度。 浏览器兼容性 opacity是...
主要给大家介绍了关于如何利用css隐藏input光标的相关资料,这是最近工作中遇到的一个需求,虽然看似不合理,但是有需要就要有解决的办法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来...
区别IE和非IE浏览器的兼容,css兼容
ie-css3(让ie678支持css3).rar
这是一款css3基于keyframes属性实现的光标闪烁动态输入打字动画特效,支持英文字母、数字和汉字输入打字效果。
兼容IE的最小最大高度CSS写法
CSS拓展案例,包含定位,光标,圆角边框,透明度opacity,边框合并,
DIV+CSS相对IE6、IE7和IE8的兼容问题
CSS自定义inputfile
但凡是前端工程师,都知道IE6,IE7,IE8不支持、或者不完全支持CSS3的属性。 CSS3 有很多很强大、绚丽的效果,比如,圆角,阴影,渐变透明,渐变背景,等等。 因为IE6时代,没有什么标准,而因为各种原因,IE6用户...
光标形状 html css css知识 网页知识
IE6, IE7, IE8 CSS 兼容速查表
让你开发的程序能兼容IE兼容CSS3。很好的工具。
css解决IE6,IE7,firefox兼容性问题.在当前IE6 IE7 FifeFox三分天下的情况下,浏览器兼容性问题成为网页设计者需要考虑的问题.