Question

我有一个标签窗格，基本上是一个包含6个图像的行，全部浮动。它们都是红色，默认情况下底部边框设置为4px white。选中标签后，4px边框将变为red。不幸的是，在Firefox中，内容和边框之间有一个空格。现在它是一个带有图像的按钮。按钮之间的1px余量是有意的，并且按预期工作。

根据开发窗格，边距/填充/图像边框/等都是零，但内容和边框之间仍然有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中，标签会根据需要进行渲染

Answer 1

尝试将图像设置为display: block

渲染firefox图像的区别

1 个答案: