差異使Firefox的圖像

我基本上是一個行6幅，所有浮動標籤窗格。他們都是紅色，底部邊框被默認設置爲4px white。當選擇一個選項卡時，4PX邊框變爲red。不幸的是，在Firefox中，內容和邊框之間有一個空格。現在它是一個內含圖像的按鈕。按鈕之間的1px邊距是有意的，並按預期工作。差異使Firefox的圖像

保證金/填充/圖像邊界/等都是零，根據發展窗格中，但仍有的內容和邊界之間的1px的白線?????

您可以查看此網頁：

www.bookyoursite.com/more/1

以下是內與自己的形象的按鈕：

<div id="buttonContainer"> 
     <button id="button1" class="buttons" onclick="hideAllBut('tab',1)"><img src="/images/buttons/sites.png" /></button> 
     <button id="button2" class="buttons" onclick="hideAllBut('tab',2)"><img src="/images/buttons/rates.png" /></button> 
     <button id="button3" class="buttons" onclick="hideAllBut('tab',3)"><img src="/images/buttons/recreation.png" /></button> 
     <button id="button4" class="buttons" onclick="hideAllBut('tab',4)"><img src="/images/buttons/facilities.png" /></button> 
     <button id="button5" class="buttons" onclick="hideAllBut('tab',5)"><img src="/images/buttons/ratings.png" /></button> 
     <button id="button6" class="buttons" onclick="hideAllBut('tab',6)"><img src="/images/buttons/nearby.png" /></button> 
</div>

CSS上述的產生密切相關：

#buttonContainer { 
     font-size:0; 
     text-align:center; 
     border-image-width:0; 
    } 
    .buttons{ 
     font-size:inherit; 
     position:relative; 
     padding:0; 
     border:none; 
     background-color:transparent; 
     width:90px; 
     margin-right:1px; 
     border-bottom:4px solid white; 

     border-image-width:inherit; 
    } 
    .buttons img { 
     padding:0; 
     border-image-width:inherit; 
    }

爲了完整起見，我將包含onclick代碼......但是這個大概不是有用：

function hideAllBut(name,n){ //hides all other items with name, and then displays the selected tab's pane 
    for (i = 1;i <= 1000; i ++){ 
     p = document.getElementById(name + i); 
     if (p == null)break; 
     p.style.display="none"; 
     document.getElementById("button" + i).style.borderBottom="4px solid white" 
    } 
    document.getElementById(name + n).style.display="block"; 
    document.getElementById("button" + n).style.borderBottom="4px solid red" 
}

在Chrome和IE瀏覽器，標籤渲染爲所需

來源

2013-11-25 Chris

嘗試將圖片設置爲display: block

來源

2013-11-25 22:28:07 asherrard

感謝您的想法，但是差距仍然存在 – Chris

差異使Firefox的圖像

回答

相關問題