这真的很奇怪。我在这个网站上有一个列表菜单,菜单中的每个元素都有一个简单的 :hover 效果。
在 Firefox 中它工作得很好。但我的 IE7 至少有一个滞后。我没有在 IE8 中测试过它,但我猜它也在那里。
现在,我一直在尝试对代码进行验证,以查看可能导致问题的原因。我看过很多关于类似场景的帖子。但它们似乎都不适用于我的情况。
所以刚才我注意到在我的 css 样式表中,我有这个:
li:hover {
background-image: url(img/TopLine.png);
Height:29px;
奇怪的是,如果我删除高度规范,就没有延迟!是什么原因造成的?它可能是父 li 类的填充层和边距层吗?还是那个上面的父类?
这是这些元素的代码。其余的 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; }
关于如何改进它有什么想法吗?
最佳答案
我真的没有任何延迟。虽然第一次有轻微的延迟 - 这很可能是因为正在加载背景图像。
您最好在列表项上设置背景,然后在悬停时更改背景位置。 (SO 上有很多关于此的问题。)
关于html - CSS-:hover is slow/laggy in IE7,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2138977/