背景图像在 IE7 中无法正确显示答案

【问题标题】：Background Image not appearing properly in IE7背景图像在 IE7 中无法正确显示
【发布时间】：2012-01-07 19:07:17
【问题描述】：

我有一个表格单元格，我必须在其中设置背景图像，我拥有的背景图像基本上包含 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;
        }

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

我不明白为什么 IE7 会出现这个空白！！

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

【问题讨论】：

高度需要自动吗？如果没有，我建议设置一个固定的高度。另外，尝试添加display: block; :)
你能reproduce the problem让我们看看吗？
@thirtydot 在某种意义上是“复制”？？
@peduarte 不，高度不必是自动的，我会尝试修复它并添加显示：块
@thirtydot：我用他提交的代码创建了一个，但没有重现问题 - jsfiddle.net/qYNAD/2

标签： html css internet-explorer

【解决方案1】：

我通过为带有背景图像的 dom 元素添加 af 透明边框来修复它：

修复前的 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;
}

我知道这是一个 hack，但它确实有效。

【讨论】：

【解决方案2】：

这是你的解决方法：

ul {
    overflow: hidden;
}

li {
    clear:both;
    float:left;
}

【讨论】：

谢谢它的工作......但你能告诉我到底是什么问题
如果你看这个：http://jsfiddle.net/peduarte/qYNAD/10/你可以看到IE7在img3和img2之间增加了一个空格。通过浮动li 并使用overflow: hidden 清除浮动，它可以解决问题。没有比这更好的解释了，也许其他人可以？
我想我明白了：P。嘿，对于相同的代码，是否可以在 y 方向拉伸图像。因为如果我需要更长的盒子，我不能在 y 方向上重复图像（因为渐变的东西），而是我必须以某种方式拉伸它。在 Firefox 中，使用 background-size 属性非常简单，但在 IE 中没有任何建议？？
你必须做一个更大版本的渐变:(
哦，所以如果渐变高度为 57px，我只能将它用于高度为 57px 的框 :( :( 太糟糕了！！......无论如何感谢您的回答（我在这里等待时） IE 完全兼容 CSS3 的那一天）：P

【解决方案3】：

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

<!DOCTYPE html>
<html>...

也可能是我的line-height 导致了您的问题。阅读更多http://reference.sitepoint.com/css/line-height

【讨论】：

我放置图像的元素的高度与图像高度完全相同！......是的，我使用了正确的 DOCTYPE 声明！（你的回答没有任何意义，如果这是问题，它甚至不会在 IE8 中工作！）
编辑了我的答案，尝试使用 line-height。
请检查你分享的链接的“兼容性”部分，它说它与 IE7 不兼容，这实际上是我的问题，所以很抱歉这也不能解决问题....任何方式感谢您的时间，虽然其他人已经回答了这个问题，他的解决方案实际上已经通过了一次......干杯！！