Question

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

所以我将单元格高度设置为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”类编写的css

.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;
        }

包含这些背景图像的单元格的高度是'auto'现在这个工作正常是所有浏览器甚至是IE8但是在IE7中不是IE8和IE7中的结果： -

Output in IE8 Output in IE7

我不明白为什么这个白色差距会在IE7中出现!!

链接到JSFiddle：http://jsfiddle.net/qYNAD/8/

Answer 1

这是你的修复：

ul {
    overflow: hidden;
}

li {
    clear:both;
    float:left;
}

Answer 2

增加高度以适合图像，并确保使用DOCTYPE，这通常会导致IE中出现不同的行为。

<!DOCTYPE html>
<html>...

也许line-height导致你的问题。阅读更多http://reference.sitepoint.com/css/line-height

Answer 3

我通过将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中无法正常显示

3 个答案: