我有 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; }
有什么想法吗?
谢谢。
最佳答案
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 的类一起工作
关于html - IE6背景错位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2034759/