IE6背景错位-Java 学习之路

-1

我有IE6 .

[ EDIT ：你可以在这里看到模板：http://themeforest.net/item/aqua-terra-lava-html-blog-portfolio-/full_screen_preview/53209]

我有一个模板，其中3 <a></a> 可以改变背景的位置以创建按钮效果 .

这是它在任何浏览器中的外观

Any Browser http://i45.tinypic.com/2s7vome.png

这是IE6：

IE6 http://i48.tinypic.com/2mmsbxu.png

这个CSS代码：

#featured-nav {
    width: 944px;
    height: 131px;
    background: url(/images/site/shadow.gif) bottom center no-repeat;
}
#featured-nav a {
    height: 35px;
    float: left;
    cursor: pointer;
    display: block;
    padding: 47px 20px 20px 120px;
    font-size: 12px;
    line-height: 16px;
    text-decoration: none;
    font-weight: normal;
    color: #777;
}
#featured-nav a span {
    margin-top: 10px;
    height: 30px;
    width: 150px;
    font-size: 12px;
    text-transform: uppercase;
    color: #5aa0b1;
    font-weight: bold;
    position: absolute;
    top: 12px;
    left: 120px;
}
#featured-nav a img {
    position: absolute;
    left: 40px;
    top: 23px;
}
#featured-nav a.left {
    background: url(/images/site/leftbutton.png) top left no-repeat;
    width: 178px;
    overflow: hidden;
    position: relative;
}
#featured-nav a.left:hover, #featured-nav a.left.activeSlide { background: url(/images/site/leftbutton.png) bottom left no-repeat; }

#featured-nav a.middle {
    background: url(/images/site/middlebutton.png) top left no-repeat;
    width: 174px;
    overflow: hidden;
    position: relative;
}
#featured-nav a.middle:hover, #featured-nav a.middle.activeSlide { background: url(/images/site/middlebutton.png) bottom left no-repeat; }
#featured-nav a.right {
    background: url(/images/site/rightbutton.png) top left no-repeat;
    width: 172px;
    overflow: hidden;
    position: relative;
}
#featured-nav a.right:hover, #featured-nav a.right.activeSlide { background: url(/images/site/rightbutton.png) bottom left no-repeat; }
.content-wrapper {
    width: 678px;
    overflow: hidden;
    margin-top: 10px;
    margin-left: 8px;
}

任何的想法？

谢谢 .

3 回答

0

我相信IE6在某些PNG的背景定位方面存在问题 . 作为测试，您应该尝试用JPG或不透明的PNG替换图像 .

回复于 2024-05-18T20:29:58+08:00
1

您可能希望将display：inline添加到浮动元素 . 这不会影响其他浏览器，但会阻止IE在元素上加倍边距 .

回复于 2024-05-18T20:29:58+08:00
0
IE 6无法正确理解元素上的多个类，所以我建议你把它放到
#features-nav {
宽度：944px;
身高：131px;
background：url（/images/site/shadow.gif）bottom center no-repeat;
}
作为CSS中的最后一条规则，所以IE 6最后才能获得它 .

你一定会在其他地方遇到类似的问题..

要确保创建完整的背景按钮（一个图像中的整个按钮）/创建多个元素来定义按钮的每一面/或废弃IE 6 ...

[EDIT] 它不适用于您的情况..废弃我的建议..

作为替代方案，您可以重命名所选的类，而不是使用两个像 left.activeSlide 的名称 left_activeSlide ...

[EDIT 2] 这里是您在评论中提到的特定模板的一些代码

他们使用循环插件，并在cycle.js文件中（最后）他们有初始化代码
```
function onBefore(){

 var slide = $(this).attr('id');

 $('#featured-nav ul li.activeSlide').removeClass('activeSlide');

 $('#featured-nav ul li#' + slide).addClass('activeSlide');

}
```
现在如果你改成它
```
function onBefore(){

 var slide = $(this).attr('id');

 $('#featured-nav ul li.'+slide+'activeSlide').removeClass('leftactiveSlide rightactiveSlide middleactiveSlide');

 $('#featured-nav ul li#' + slide).addClass(slide+'activeSlide');

}
```
它适用于名为leftactiveSlide，middleactiveSlide rightactiveSlide的类
回复于 2024-05-18T20:29:58+08:00

IE6背景错位

3 回答

相关问题