背景图片在IE7中没有正确显示

问题描述：

我有一个表格单元格，在其中我必须设置一个背景图片，背景图片我基本上包含3个部分第一部分是顶部部分（出来的很好）第二部分是底部部分这也看起来不错，第三个是中间部分是一个高度为57px的精灵。这张图片（第3张）可以在x方向上重复，但我需要以某种方式在Y方向上拉伸它。在Firefox中，此图像完全适合使用background-size:contain属性，但此属性对IE无效。背景图片在IE7中没有正确显示

因此，我将单元格高度设置为57px（这是图像的高度）并仅在x方向上重复图像。在HTML我有看起来像这样：

<table> 
    <tr> 
     <td> 
       <ul> //for some reason i'm using li tags for setting the images 
        <li class="img1"></li> 
        <li class="img3"></li> //the middle img which is creating the problem 
        <li class="img2"></li> 
       </ul> 
     </td> 
    </tr> 
</table>

这里是我的类“IMG3”

.img3 { 
     background-image: url("../images/PictorialViewBoxes/Blue_Middle.jpg"); 
     list-style: none; 
     color: #FFFFFF; 
     font-size: 16px; 
     font-weight: Bolder; 
     text-align: center; 
     width: 160px; 
     word-wrap: normal; 
     text-transform: capitalize; 
     cursor: pointer; 
     padding-left:10px; 
     padding-right:10px; 
     min-height: 57px; 
     max-height: 57px; 
     font-family: arial; 
     background-repeat:repeat-x; 
     overflow-y:hidden; 
     }

含有这些背景图片的单元格的高度是“自动”现在写的CSS这工作得很好是所有的浏览器IE8，甚至但不是在IE7这里是结果在IE8和IE7： -

Output in IE8 Output in IE7

I D不明白为什么这个白色的差距来到IE7！

链接的jsfiddle：http://jsfiddle.net/qYNAD/8/

高度是否必须是自动的？如果没有，我建议设置一个固定的高度。此外，请尝试添加'display：block;':) – peduarte

您可以[重现问题]（http://jsfiddle.net/），以便我们可以看到它？ – thirtydot

@thirtydot“重现”的意义?? – pranky64

答

这是你的解决办法：

ul { 
    overflow: hidden; 
} 

li { 
    clear:both; 
    float:left; 
}

谢谢它的工作原理......但你能告诉我究竟是什么问题 – pranky64

如果你看看这个：[http://jsfiddle.net/peduarte/qYNAD/10/](http://jsfiddle.net/peduarte/qYNAD/10 /），你可以看到IE7在img3和img2之间增加了一个空格。通过浮动'li'并用'overflow：hidden'清除浮点数，它解决了这个问题。无法解释比这更好，也许别人可以吗？ – peduarte

我想我有你的观点：P。嘿相同的代码是有可能在y方向拉伸图像。因为如果我需要更长的盒子，我不能在y方向重复图像（因为渐变的东西），而不得不以某种方式伸展它。在Firefox中，这是非常简单的使用background-size属性，但它不适用于任何建议？ – pranky64

答

增加高度以适应图像，并使用DOCTYPE确保you're，这往往是在IE中引起不同的行为。

<!DOCTYPE html> 
<html>...

这也可能是我的line-height这是你的问题。更多详情http://reference.sitepoint.com/css/line-height

我放置图像的元素的高度与图像高度完全相同！.....并且是的，我正在使用正确的DOCTYPE声明！（你的答案没有任何意义，如果这是它的问题，它甚至不会在IE8中工作!!） – pranky64

编辑我的答案，尝试用线条高度进行修改。 – Stefan

请检查链接的“兼容性”部分，我分享了它说与IE7不兼容，这实际上是我的问题，所以对不起，这也不能解决问题....任何方式感谢您的时间，虽然有些其他人已经回答了这个问题，他的解决方案实际上经历了一次......欢呼！ – pranky64

答

我加入AF透明边框的DOM元素与背景图像固定它：

的CSS修正前：

li.icontwo { 
    padding:7px 0px 25px 70px; 
    background:url(/images/icon2.png) left top no-repeat; 
}

修复后的Css：

li.icontwo { 
    padding:7px 0px 25px 70px; 
    background:url(/images/icon2.png) left top no-repeat; 
    border:1px solid transparent; 
}

我知道它的黑客，但它的作品。

背景图片在IE7中没有正确显示

相关推荐