渲染Firefox图像的差异答案

【问题标题】：Difference in rendering firefox images渲染Firefox图像的差异
【发布时间】：2013-11-27 23:38:43
【问题描述】：

我有一个标签窗格，基本上是一行 6 张图片，全部浮动。它们都是红色的，底部边框默认设置为4px white。选择选项卡时，4px 边框变为red。不幸的是，在 Firefox 中，内容和边框之间有一个空格。现在它是一个按钮，里面有一个图像。按钮之间的 1px 边距是有意的，并且按预期工作。

margin/padding/image-border/etc都是零，根据开发面板，但是内容和边框之间还是有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 中，标签按需要呈现

【问题讨论】：

标签： html css firefox

【解决方案1】：

尝试将图像设置为display: block

【讨论】：