邊框圖像和CSS圖像僅在Firefox中不對齊

Question

我有一張桌子，其中的所有單元格都有一個1px的頂部邊框，第一列除外，它的背景圖像可以復制1px的底部邊框（邊框向左淡出）。 在所有瀏覽器（Chrome，Safari，IE6 +）中，“假邊框”與“真實邊框”對齊-Firefox中的假邊框太低1px除外。 如果我手動將圖像向上移動1px，則圖像將完全消失。

我認為Firefox處理額外的1px邊框的方式有所不同。 如果在沒有邊框的單元格旁邊有一個帶有邊框的單元格，則Firefox似乎在該邊框應留有空間，而其他瀏覽器將無邊框單元格擴展了1px，因此我的圖像可以占用該空間。 （我希望這是有道理的！）

有誰知道解決方法嗎？

工作示例： http : //resonantmind.net/temp/compare.php

Answer 1

1.我也嘗試了-1px ，但是我將高度設置為50px 。 不完全是您想要的，但似乎在正確的道路上。

.compare .item {
    background:#fcfcfc url(bg-compare-item.gif) no-repeat 0 -1px;
    height:50px;

    /* original */
    text-align:left; line-height:29px !important; border:0;
}

2.另一個解決方案是將圖像的頂行向下移動1px，然后完全刪除底行。 然后在CSS中使用-1px ，您將獲得所需的結果。 在Chome，IE9和Firefox中看起來不錯。