html - 边框图像和 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 中看起来不错。