IE6 背景未对齐

Posted 2023-03-06

【中文标题】IE6 背景未对齐

【英文标题】：IE6 background misaligned

【发布时间】：2011-01-03 08:01:19

【问题描述】：

我有 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；

有什么想法吗？

谢谢。

【参考方案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 的类

【讨论】：

我无法重命名它，因为有一个 javascript 将“activeSlide”类应用于每个元素，因此它们会像点击它们的人一样旋转。你可以在这里看到主题：themeforest.net/item/aqua-terra-lava-html-blog-portfolio-/…

我已经修改了我的答案，解决了您的具体问题..查看编辑 2 部分..

【参考方案2】：

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

【参考方案3】：

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