背景图像在 IE7 中未正确显示
[英]Background Image not appearing properly in IE7
问题描述
我有一个表格单元格，我必须在其中设置背景图像，我拥有的背景图像基本上包含 3 部分第一部分是顶部（结果很好）第二部分是底部部分，看起来也很好，第三部分是中间部分是一个高度为 57px 的精灵。 这个图像（第三个）可以在 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/
3 个解决方案
解决方案1
1 已采纳 2011-11-28 12:32:45
这是你的修复：
ul {
overflow: hidden;
}
li {
clear:both;
float:left;
}
解决方案2
0 2015-05-27 08:56:01
我通过向带有背景图像的 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;
}
我知道它是一个黑客，但它有效。
解决方案3
0 2011-11-28 11:18:47
增加高度以适合图像并确保您使用的是 DOCTYPE，这通常会导致 IE 中的不同行为。
<!DOCTYPE html>
<html>...
它也可能是导致您出现问题的line-height 。 在http://reference.sitepoint.com/css/line-height阅读更多
图像未出现在IE7或IE8中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.