html - IE6背景错位

Question

我有 IE6。

[编辑:您可以在此处查看模板:http://themeforest.net/item/aqua-terra-lava-html-blog-portfolio-/full_screen_preview/53209 ]

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

这是它在任何浏览器中的样子

这是 IE6:

这是 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;}

有什么想法吗？

谢谢。

Answer 1

IE 6 无法正确理解一个元素上的多个类 所以我建议你把

#featured-nav {
     width: 944px;
     height: 131px;
     background: url(/images/site/shadow.gif) bottom center no-repeat; 
}

作为 CSS 中的最后一条规则，因此 IE 6 最后选择它..

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

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

[编辑] 它不适用于您的情况.. 放弃我的建议..

作为替代方案，您可以重命名您选择的类，而不是使用像 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 的类一起工作