IE6 背景未对齐

Question

我有 IE6。

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

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

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

IE6 就是这样：

这是 CSS 代码：

#特色导航{ 宽度：944px； 高度：131px； 背景：url（/images/site/shadow.gif）底部中心不重复； } #特色导航一个{ 高度：35px； 向左飘浮; 光标：指针； 显示：块； 填充：47px 20px 20px 120px； 字体大小：12px； 行高：16px； 文字装饰：无； 字体粗细：正常； 颜色：#777； } #featured-nav 跨度 { 边距顶部：10px； 高度：30px； 宽度：150px； 字体大小：12px； 文本转换：大写； 颜色：#5aa0b1； 字体粗细：粗体； 位置：绝对； 顶部：12px； 左：120px； } #featured-nav 一个 img { 位置：绝对； 左：40px； 顶部：23px； } #featured-nav a.left { 背景： url(/images/site/leftbutton.png) 左上角无重复； 宽度：178px； 溢出：隐藏； 位置：相对； } #featured-nav a.left:hover, #featured-nav a.left.activeSlide { background: url(/images/site/leftbutton.png) 左下无重复； } #featured-nav a.middle { 背景： url(/images/site/middlebutton.png) 左上角无重复； 宽度：174px； 溢出：隐藏； 位置：相对； } #featured-nav a.middle:hover, #featured-nav a.middle.activeSlide { background: url(/images/site/middlebutton.png) 左下角无重复； } #featured-nav a.right { 背景： url(/images/site/rightbutton.png) 左上角无重复； 宽度：172px； 溢出：隐藏； 位置：相对； } #featured-nav a.right:hover, #featured-nav a.right.activeSlide { background: url(/images/site/rightbutton.png) 左下角无重复； } .content-wrapper { 宽度：678px； 溢出：隐藏； 边距顶部：10px； 左边距：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 ...

[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 的类

Answer 2

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

Answer 3

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