[英]Border-image and CSS image not lining up in Firefox only
I have a table where the cells all have a 1px top-border, except the first column, which has a background image to replicate a 1px bottom border (the border fades out to the left). 我有一张桌子,其中的所有单元格都有一个1px的顶部边框,第一列除外,它的背景图像可以复制1px的底部边框(边框向左淡出)。 In all browsers (Chrome, Safari, IE6+) the 'fake border' lines up with the 'real border' - except in Firefox, where the fake border is 1px too low.
在所有浏览器(Chrome,Safari,IE6 +)中,“假边框”与“真实边框”对齐-Firefox中的假边框太低1px除外。 If I manually move the image 1px up, it disappears altogether.
如果我手动将图像向上移动1px,则图像将完全消失。
I imagine that Firefox handle the extra 1px border differently. 我认为Firefox处理额外的1px边框的方式有所不同。 If there is a cell with a border next to a cell without a border, Firefox seems to leave a space where the border should be, whereas other browsers expand the border-less cell by 1px, so my images can take up that space.
如果在没有边框的单元格旁边有一个带有边框的单元格,则Firefox似乎在该边框应留有空间,而其他浏览器将无边框单元格扩展了1px,因此我的图像可以占用该空间。 (I hope that makes sense!)
(我希望这是有道理的!)
Does anyone know of a fix for this? 有谁知道解决方法吗?
Working example: http://resonantmind.net/temp/compare.php 工作示例: http : //resonantmind.net/temp/compare.php
1. I tried the -1px
as well but I set the height to 50px
. 1.我也尝试了
-1px
,但是我将高度设置为50px
。 Not exactly what you want but seems to be on the right path. 不完全是您想要的,但似乎在正确的道路上。
.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. Another solution is to shift the top line on the image down 1px and completely remove the bottom line. 2.另一个解决方案是将图像的顶行向下移动1px,然后完全删除底行。 Then have the
-1px
in the CSS and you'll get the desired results. 然后在CSS中使用
-1px
,您将获得所需的结果。 Looks good in Chome, IE9, and Firefox. 在Chome,IE9和Firefox中看起来不错。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.