我有一个表格,其中所有单元格都有一个 1px 的顶部边框,除了第一列,它有一个背景图像来复制一个 1px 的底部边框(边框向左淡出)。在所有浏览器(Chrome、Safari、IE6+)中,“假边框”与“真实边框”对齐——除了在 Firefox 中,假边框太低 1px。如果我手动将图像向上移动 1px,它就会完全消失。
我想 Firefox 会以不同方式处理额外的 1px 边框。如果有一个有边框的单元格紧挨着一个没有边框的单元格,Firefox 似乎会在应该有边框的地方留出一个空间,而其他浏览器会将无边框的单元格扩展 1px,所以我的图像可以占据那个空间。 (我希望这是有道理的!)
有人知道解决这个问题的方法吗?
最佳答案
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 中看起来不错。
关于html - 边框图像和 CSS 图像仅在 Firefox 中不对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9154207/