动画 gif 导致 IE 中的输入闪烁
当页面上有动画 gif 时，输入中的光标会随着 IE7 闪烁。
去掉gif，问题就消失了。
编辑（再次）： 我真正需要的是知道奇怪的 ie bug 答案的人。
我是一名拥有 10 年经验的网络应用开发人员。 相信我，我知道如何调试——例如，知道动画 gif 是屏幕绘制的原因是成功调试的结果。 解决这个问题是另一回事。
使用我的 gif 和下面答案三中的代码进行编辑（再次，再次）。
<html>
<head>
<style type="text/css">
#img {
position: absolute;
}
#dv {
background-color: transparent;
border: 1px solid Black;
height: 450px;
position: absolute;
width: 600px;
}
#frm {
left: 170px;
position: absolute;
top: 100px;
}
</style>
</head>
<body>
<img src="http://www.johnherr.net/skeleton.gif" id="img">
<div id="dv">
</div>
<form id="frm">
<input type="text">
</form>
</body>
</html>
The Cursor in an input flickers with IE7 when the page has an animated gif on it.
Take away the gif, and the problem goes away.
Edit (again):
What I really need is somebody who knows the answer to a bizarre ie bug.
I'm a 10 year experienced web app developer. Trust me, I know how to debug -- for instance, knowing for a fact that the animated gif is the reason for the screen draw is the result of a successful debug. Fixing that is another matter.
Edit (again, again), using my gif, and the code from answer three below.
<html>
<head>
<style type="text/css">
#img {
position: absolute;
}
#dv {
background-color: transparent;
border: 1px solid Black;
height: 450px;
position: absolute;
width: 600px;
}
#frm {
left: 170px;
position: absolute;
top: 100px;
}
</style>
</head>
<body>
<img src="http://www.johnherr.net/skeleton.gif" id="img">
<div id="dv">
</div>
<form id="frm">
<input type="text">
</form>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我遇到过同样的问题。 删除 gif 动画，闪烁就会停止。
查看 CSS，我注意到图像正在调整大小以供显示。
我使用在线编辑器创建了我需要的大小的图像副本。
将动画 gif 切换到不需要调整大小的版本解决了问题。
I had the same issue. Remove the animated gif and the flicker stops.
Looking at the CSS, I noticed that the image was being resized for display.
I created a copy of the image using an online editor to the size that I needed.
Switching the animated gif to a version not requiring resizing solved the problem.
也许是你的CPU无法处理负载？ 这尤其可能是在运行密集型 JavaScript 的网站上的旧计算机上引起的。
Perhaps it's your CPU that can't handle the load? This could especially be caused on an older machine on a website running intensive javascript.
我试图尽可能地复制你所描述的内容。 我将上述内容加载到 IE 6、7 和 8 中，但没有看到任何闪烁的光标问题。
鉴于我可以提出一个不存在该问题的实现，因此 IE 7 中似乎不存在任何一般的 animated-gif-causes-input-cursor-flickering 错误，并且您的特定的标记和 CSS 暴露了该浏览器中的问题。
当然，添加动画 gif 是导致您所看到的内容的最后一块拼图。 但正如我所演示的，您可以在绝对定位的动画 gif 上放置一个绝对定位的表单，并在它们之间有一个透明的 div，并且光标不会闪烁。
我认为你必须一次一层地剥离你正在做的事情，直到你能具体确定你的标记或CSS中暴露问题的是什么。
还有另一种可能性，您看到的闪烁可能是您的视频卡和/或视频驱动程序的伪影。 您可能需要尝试在硬件完全不同的机器上在 IE 7 下查看页面，以排除这种可能性。
I tried to replicate what you described as closely as possible. I loaded the above into IE 6, 7 and 8 and was unable to see any flickering cursor problems.
Given that I can come up with an implementation that does not exhibit the issue, there does not seem to be any general animated-gif-causes-input-cursor-flickering bug in IE 7 and something in your specific markup and CSS is exposing the problem in that browser.
Certainly adding the animated gif is the final piece of the puzzle leading to what you are seeing. But as I've demonstrated, you can have an absolutely positioned form over an absolutely positioned animated gif with a transparent div between them and the cursor does not flicker.
I think you are going to have to strip away what you are doing one layer at a time until you can determine specifically what it is in your markup or CSS that exposes the problem.
There is one other possibility, the flickering you are seeing may be an artifact of your video card and/or video driver. You might want to try viewing the page under IE 7 on a machine with completely different hardware to rule out this possibility.