IE6背景錯位

Question

我有IE6。

[編輯：你可以看到模板住在這裏：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; 
} 

任何想法？

謝謝。

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 .. 。

[編輯2]這裏是您在您的評論中提到

他們使用週期插件特定的模板一些代碼，並在cycle.js文件（末）他們有initializa重刑代碼是

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

你可能想顯示添加：內嵌到浮動元素。這不會影響其他瀏覽器，但會阻止IE將元素邊距加倍。

Answer 3

我相信IE6有背景定位一定的PNG問題。就像測試一樣，你應該嘗試用JPG或不透明的PNG替換圖像。