`
zTreeAPI
  • 浏览: 346368 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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>

 

 

 

分享到:
评论

相关推荐

    CSS拓展案例,包含定位,光标,圆角边框,透明度opacity,边框合并,焦点伪类选择器,属性选择器

    本案例涉及了多个核心CSS概念,包括定位、光标、圆角边框、透明度、边框合并以及焦点伪类选择器和属性选择器。让我们逐一深入探讨这些知识点。 1. **定位(Positioning)**:在CSS中,元素的位置可以通过`position`...

    css3光标闪烁动态输入打字动画特效

    这段代码定义了一个名为“blink”的动画,使得光标在0%和50%的时间点之间透明度交替,从而实现闪烁效果。 接下来,我们需要在HTML中设置一个文本输入区域,并为其添加相应的CSS样式。这里,我们可以使用伪元素:...

    滤镜问题-FireFox火狐浏览器与IE的对比分析

    - `*-moz-opacity`: 设置透明度。 - `*-moz-outline`: 设置轮廓线。 - `*-moz-outline-color`: 设置轮廓线颜色。 - `*-moz-outline-offset`: 设置轮廓线偏移。 - `*-moz-outline-radius`: 设置轮廓线的圆角半径...

    CSS Reset 样式重置的实现示例.pdf

    通过这样的 CSS Reset,开发者可以在一个统一的基础上开始编写自定义样式,从而提高开发效率,减少由于浏览器默认样式导致的问题。然而,值得注意的是,CSS Reset 并非一成不变,应根据实际项目需求进行适当调整和...

    input输入放大镜的js效果

    4. **样式处理**:JS与CSS结合,为放大镜添加合适的样式,如透明度、边框、阴影等,以提供良好的视觉效果。 5. **性能优化**:由于需要实时更新,性能优化尤为重要。开发者可能会利用节流(throttle)或防抖...

    input元素[type="file"]时的样式定制及浏览器兼容性问题探讨

    然后,将`input[type="file"]`的`position`属性设置为`absolute`,并调整其尺寸以填充整个容器,同时将其透明度设为0,使其在视觉上“消失”。这样,用户点击容器的任何部分都可以触发文件选择对话框,而实际的样式...

    css公共样式

    - 为按钮类添加鼠标悬停时的透明度变化效果,提升用户体验。 ### 文本样式 - **`.inputcolor{ color:#333333; }`** - 设置输入框内部文本颜色,使界面色彩更加协调。 ### 浮动与定位 - **`.fn_left{ float:left;...

    Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt

    a:active 选择的是鼠标正在按下没有弹起的链接 注意:按照LVHA的顺序写 链接在浏览器中有默认样式 所以一般需要单独指定 (6)焦点选择器(对input标签) 用于选取获得焦点(光标选中)的表单元素 语法 ...

    SearchBar14:搜索栏14 | CSS Mini项目36

    - 使用`transition`属性添加平滑过渡效果,如改变颜色或透明度。 6. **响应式设计**: - 通过媒体查询(`@media`)实现不同屏幕尺寸下的样式调整,确保在移动设备上也能正常显示和使用。 - 考虑搜索栏在小屏幕上的...

    website-photography:这基本上是我用html css编码的第一个网站

    HTML的`&lt;img&gt;`标签配合`src`属性引用图片,而CSS则可以用来优化图片的显示,如设置图片的尺寸、添加边框、透明度或滤镜效果。此外,可能还使用了CSS的`object-fit`属性来调整图片在容器中的填充方式,保持比例或者...

    web常用单词.pdf

    - `opacity`: 设置元素的透明度。 - `z-index`: 控制层叠上下文中的层级关系。 - `filter`: 应用于图像处理的属性,比如设置`opacity`。 - `cursor`: 设置鼠标光标样式,如`pointer`表示手形光标。 - `name`: 在表单...

    js表单特效

    - **鼠标悬停效果**:使用`mouseover`和`mouseout`事件,改变链接的下划线、颜色或者透明度。 - **访问状态**:通过JavaScript检测链接是否已被访问过,改变已访问链接的样式,如修改颜色或添加特殊标记。 - **...

    Canvas表单焦点圆点交互特效.zip

    此外,还可以调整Canvas的样式,如透明度、位置等,使之与页面其他元素协调。 jQuery库使得JavaScript代码更简洁易读,提供了丰富的DOM操作和事件处理功能。例如,使用`$(document).ready()`函数确保代码在DOM加载...

    网页设计作业(二)平台答案.doc

    - **页面属性**:网页背景图及其透明度不能在“页面属性”中设置。 - **输入域**:`&lt;input type=text name="" address="" size=30&gt;`创建了一个单行文本输入区域。 6. **多选题解析**: - **列表type**:`square`...

    常州继续教育网页设计及制作考试题及答案答案.doc

    11. Flash动画制作:设置元件透明度、使用别离命令(Ctrl+B)将文本打散为形状,以及使用属性面板调整实例属性。 12. 输出格式:Fireworks可以输出PNG格式,适用于网页设计。 13. 嵌入多媒体标记:例如,在音频或...

    jquery 打开层表情

    2. **CSS 样式**:定义层的样式,包括位置、大小、透明度等,确保它在需要时可以正确显示。同时,也要设定表情元素的样式。 ```css #emoticon-layer { position: absolute; z-index: 100; /* 确保层位于其他...

    html技巧

    `&lt;script language="javascript"&gt;`中的JavaScript代码用于实现图片透明度的动态调整,这可以用来创建动态的视觉效果。 以上就是从标题“html技巧”及其描述“很多非高手不知道的东西”中整理出来的一系列高级HTML...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正了IE下Grid中的一个JS问题(feedback:lqm4108)。 -修正Alert消息中引号未编码导致的JS错误(feedback:sun1299shine)。 +集成extjs3.0.3。 -修正弹出对话框的宽度计算错误(会保持最小的状态)。 -增加新的...

    ExtAspNet_v2.3.2_dll

    -修正了IE下Grid中的一个JS问题(feedback:lqm4108)。 -修正Alert消息中引号未编码导致的JS错误(feedback:sun1299shine)。 +集成extjs3.0.3。 -修正弹出对话框的宽度计算错误(会保持最小的状态)。 -增加新的...

Global site tag (gtag.js) - Google Analytics