Internet Explorer 7 的 CSS 滚动更新问题-解网

问：

我在我的 HTML 代码中编写了一些 CSS 来创建鼠标悬停按钮。然后我尝试用 IE 7 运行它并感到惊讶！它不运行。事实上，它同时显示了按钮和底层翻转。如何解决 IE 无法缓存背景图像的问题？最好使用 CSS，但 javascript “将”被尝试。

CSS 示例：

 #Menu 
 { 
    width: 100%; 
    height: 32px; 
    margin-top: 93px;
    padding-left: 13px;
}


 #Menu a 
{ 
    height: 32px; 
    line-height: 32px; 
    width: 123px; 
    background: url("img/menu.png") top left no-repeat; 
    background-position: -123px 0; 
    float: left; 
    margin-left: 3px; 
    text-decoration: none; 
    color: #1e1e1d; 
    font-size: 12px; 
    text-align: center; 
}

 #Top #Menu a:hover, #Top #Menu a.active 
{ 
    background-position: 0px 0; 
    text-decoration: underline;
}

javascript css 互联网浏览器

尝试确保您的 CSS 语法正确无误。某些浏览器允许您按任何顺序指定属性，但 IE 会窒息。应以 X Y 形式（水平后垂直）指定附件。您目前有 .来得及。此外，在行的末尾，它应该紧接在 url 声明之后和位置声明之前。backgroundtop leftleft topno-repeat

CSS 背景速记值的顺序应为：

背景颜色
背景图像
背景重复
背景位置
背景附件

例如。background: #fff url(example.jpg) no-repeat left top fixed;

2赞 Jayx 2/1/2009 #3

好吧，首先，您给出了相互矛盾的指示......

background: url("img/menu.png") top left no-repeat;
background-position: -123px 0;

...背景已经使用速记进行定位。

我假设您的常规状态和悬停状态都共享相同的图像，那么为什么不使用速记来执行呢？删除。。。

背景位置：-123px 0;

...对于您的悬停和活动状态，请使用 ...

background-position: bottom left;

然后把你的两个状态都放在一张图片中，一个在另一个下面（我认为这是你一直在尝试的）。

图像翻转问题主要是因为每次将鼠标悬停在链接或选项卡上时都会下载图像。此闪烁是由删除主图像并加载变换图像时的延迟引起的（即使它们在技术上是相同的图像，Internet Explorer 也更喜欢单独处理它们）。

查看翻转问题的完整修复：http://faqspoint.blogspot.com/2011/12/ie-rollover-problem.html

上一个：IE CSS 对齐问题

下一个：JavaScript 中的 Array.length 问题

Internet Explorer 7 的 CSS 滚动更新问题

CSS rollover problems with Internet Explorer 7

评论

评论