CSS - :hover 在 IE7 中缓慢/滞后
这实在是太奇怪了。我有这个网站，其中有一个列表菜单，菜单中的每个项目都有一个简单的 :hover 效果。
在 Firefox 中它工作得很好。但我的IE7至少有一个延迟。我还没有在 IE8 中测试过它，但我猜它也在那里。
现在，我一直在尝试对代码进行验证，以了解可能导致问题的原因。我看过很多关于类似场景的帖子。但它们似乎都不适用于我的情况。
所以刚才我注意到在我的 css 样式表中，我有这个：
li:hover {
background-image: url(img/TopLine.png);
Height:29px;
}
很奇怪，如果我删除高度规范，就没有延迟！可能是什么原因造成的？难道是父类li类的一层padding和margin？或者是该类之上的父类？
这是这些项目的代码。其余的 css 您可以在网站的 /main.css 下找到
#header {
padding-right:7%;
height: 57px;
background-image:url(img/TopLine.png); }
.header a {
font-family:georgia;
font-size:22px;
color:#ebebeb;
text-decoration:none; }
.header li {
float:right;
list-style: none;
margin-top:10px;
padding-top:18px;
padding-left: 23px;
padding-right: 23px;
height:23px; }
li:hover {
background-image: url(img/TopLine.png);
Height:29px; }
有关如何改进此功能的任何想法？
This is really strange. I've got this site where I have a list menu with a simple :hover effect on each item in the menu.
In Firefox it works just fine. But i IE7 atleast there's a lag. I haven't tested it in IE8 but my guess is that it's there as well.
Now, I've been trying out veriations to the code to see what might cause the issue. And I've seen alot of posts about similar scenarios. But none of them seemed to apply to my case.
So just now I noticed that in my css stylesheet, I've got this:
li:hover {
background-image: url(img/TopLine.png);
Height:29px;
}
Strange enough, if I remove the height specifications, there is no lag! What could be causing this? Could it be layers of padding and margins to the parent li class? Or the parent class above that one?
This is the code of these items. The rest of the css you can under /main.css of the site
#header {
padding-right:7%;
height: 57px;
background-image:url(img/TopLine.png); }
.header a {
font-family:georgia;
font-size:22px;
color:#ebebeb;
text-decoration:none; }
.header li {
float:right;
list-style: none;
margin-top:10px;
padding-top:18px;
padding-left: 23px;
padding-right: 23px;
height:23px; }
li:hover {
background-image: url(img/TopLine.png);
Height:29px; }
Any ideas on how I can improve this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我真的没有任何滞后。第一次有轻微的延迟 - 这很可能是因为背景图像正在加载。
您最好在列表项上设置背景，然后在悬停时更改背景位置。 （SO 上有很多关于此的问题。）
I'm not really getting any lag. The first time there is a slight delay though - this is most likely because the background image is loading.
You'd be better off setting a background on the list item proper then changing the background position on hover. (There are plenty of questions on SO about this.)