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中看起来很不错。

边框图像和CSS图像仅在Firefox中排队

1 个答案: