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概念，包括定位、光标、圆角边框、透明度、边框合并以及焦点伪类选择器和属性选择器。让我们逐一深入探讨这些知识点。 1. **定位（Positioning）**：在CSS中，元素的位置可以通过`position`...
这段代码定义了一个名为“blink”的动画，使得光标在0%和50%的时间点之间透明度交替，从而实现闪烁效果。 接下来，我们需要在HTML中设置一个文本输入区域，并为其添加相应的CSS样式。这里，我们可以使用伪元素:...
- `*-moz-opacity`: 设置透明度。 - `*-moz-outline`: 设置轮廓线。 - `*-moz-outline-color`: 设置轮廓线颜色。 - `*-moz-outline-offset`: 设置轮廓线偏移。 - `*-moz-outline-radius`: 设置轮廓线的圆角半径...
通过这样的 CSS Reset，开发者可以在一个统一的基础上开始编写自定义样式，从而提高开发效率，减少由于浏览器默认样式导致的问题。然而，值得注意的是，CSS Reset 并非一成不变，应根据实际项目需求进行适当调整和...
4. **样式处理**：JS与CSS结合，为放大镜添加合适的样式，如透明度、边框、阴影等，以提供良好的视觉效果。 5. **性能优化**：由于需要实时更新，性能优化尤为重要。开发者可能会利用节流（throttle）或防抖...
然后，将`input[type="file"]`的`position`属性设置为`absolute`，并调整其尺寸以填充整个容器，同时将其透明度设为0，使其在视觉上“消失”。这样，用户点击容器的任何部分都可以触发文件选择对话框，而实际的样式...
- 为按钮类添加鼠标悬停时的透明度变化效果，提升用户体验。 ### 文本样式 - **`.inputcolor{ color:#333333; }`** - 设置输入框内部文本颜色，使界面色彩更加协调。 ### 浮动与定位 - **`.fn_left{ float:left;...
a:active 选择的是鼠标正在按下没有弹起的链接 注意：按照LVHA的顺序写 链接在浏览器中有默认样式 所以一般需要单独指定 （6）焦点选择器（对input标签） 用于选取获得焦点（光标选中）的表单元素 语法 ...
- 使用`transition`属性添加平滑过渡效果，如改变颜色或透明度。 6. **响应式设计**： - 通过媒体查询(`@media`)实现不同屏幕尺寸下的样式调整，确保在移动设备上也能正常显示和使用。 - 考虑搜索栏在小屏幕上的...
HTML的`<img>`标签配合`src`属性引用图片，而CSS则可以用来优化图片的显示，如设置图片的尺寸、添加边框、透明度或滤镜效果。此外，可能还使用了CSS的`object-fit`属性来调整图片在容器中的填充方式，保持比例或者...
- `opacity`: 设置元素的透明度。 - `z-index`: 控制层叠上下文中的层级关系。 - `filter`: 应用于图像处理的属性，比如设置`opacity`。 - `cursor`: 设置鼠标光标样式，如`pointer`表示手形光标。 - `name`: 在表单...
- **鼠标悬停效果**：使用`mouseover`和`mouseout`事件，改变链接的下划线、颜色或者透明度。 - **访问状态**：通过JavaScript检测链接是否已被访问过，改变已访问链接的样式，如修改颜色或添加特殊标记。 - **...
此外，还可以调整Canvas的样式，如透明度、位置等，使之与页面其他元素协调。 jQuery库使得JavaScript代码更简洁易读，提供了丰富的DOM操作和事件处理功能。例如，使用`$(document).ready()`函数确保代码在DOM加载...
- **页面属性**：网页背景图及其透明度不能在“页面属性”中设置。 - **输入域**：`<input type=text name="" address="" size=30>`创建了一个单行文本输入区域。 6. **多选题解析**： - **列表type**：`square`...
11. Flash动画制作：设置元件透明度、使用别离命令（Ctrl+B）将文本打散为形状，以及使用属性面板调整实例属性。 12. 输出格式：Fireworks可以输出PNG格式，适用于网页设计。 13. 嵌入多媒体标记：例如，在音频或...
2. **CSS 样式**：定义层的样式，包括位置、大小、透明度等，确保它在需要时可以正确显示。同时，也要设定表情元素的样式。 ```css #emoticon-layer { position: absolute; z-index: 100; /* 确保层位于其他...
`<script language="javascript">`中的JavaScript代码用于实现图片透明度的动态调整，这可以用来创建动态的视觉效果。 以上就是从标题“html技巧”及其描述“很多非高手不知道的东西”中整理出来的一系列高级HTML...
-修正了IE下Grid中的一个JS问题(feedback:lqm4108)。 -修正Alert消息中引号未编码导致的JS错误(feedback:sun1299shine)。 +集成extjs3.0.3。 -修正弹出对话框的宽度计算错误(会保持最小的状态)。 -增加新的...
-修正了IE下Grid中的一个JS问题(feedback:lqm4108)。 -修正Alert消息中引号未编码导致的JS错误(feedback:sun1299shine)。 +集成extjs3.0.3。 -修正弹出对话框的宽度计算错误(会保持最小的状态)。 -增加新的...