背景图像在 IE7 中未正确显示
[英]Background Image not appearing properly in IE7
问题描述
I have a table cell in which i have to set a background image, the background image i have basically contains 3 parts 1st is the top part (which comes out fine) 2nd is the bottom part which also appears fine and the 3rd that is the middle portion is a sprite which has a height of 57px.
我有一个表格单元格，我必须在其中设置背景图像，我拥有的背景图像基本上包含 3 部分第一部分是顶部（结果很好）第二部分是底部部分，看起来也很好，第三部分是中间部分是一个高度为 57px 的精灵。 This image(3rd) can be repeated in the x direction but i need to somehow stretch it in Y direction.这个图像（第三个）可以在 x 方向重复，但我需要以某种方式在 Y 方向拉伸它。 In firefox this image fits perfectly using the background-size:contain property but this property does not work for IE.在 Firefox 中，使用background-size:contain属性非常适合此图像，但此属性不适用于 IE。
So I'm setting the cell height to 57px (which is the height of the image) and repeating the image only in x direction.所以我将单元格高度设置为 57px（这是图像的高度）并仅在 x 方向重复图像。 The HTML i have looks something like this:我拥有的 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>
Here is the css i have written for the class "img3"这是我为“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;
}
The height of the cell containing these background images is 'auto' Now this works fine is all browsers even IE8 but not in IE7 here is the result in IE8 and IE7 :-包含这些背景图像的单元格的高度是“自动”现在这适用于所有浏览器甚至 IE8，但不适用于 IE7 这里是 IE8 和 IE7 中的结果：-
I don't understand why this white gap is coming in IE7!!我不明白为什么这个白色间隙会出现在 IE7 中！！
Link to JSFiddle: https://jsfiddle.net/qYNAD/8/链接到 JSFiddle： https ://jsfiddle.net/qYNAD/8/
3 个解决方案
解决方案1
1 已采纳 2011-11-28 12:32:45
Here's your fix:这是你的修复：
ul {
overflow: hidden;
}
li {
clear:both;
float:left;
}
解决方案2
0 2015-05-27 08:56:01
I fixed it by adding af transparent border to the dom element with the background image:我通过向带有背景图像的 dom 元素添加 af 透明边框来修复它：
Css before fix:修复前的 CSS：
li.icontwo {
padding:7px 0px 25px 70px;
background:url(/images/icon2.png) left top no-repeat;
}
Css after fix:修复后的CSS：
li.icontwo {
padding:7px 0px 25px 70px;
background:url(/images/icon2.png) left top no-repeat;
border:1px solid transparent;
}
I know its a hack but it works.我知道它是一个黑客，但它有效。
解决方案3
0 2011-11-28 11:18:47
Increase the height to fit the image and make sure you´re using a DOCTYPE, this is often causing different a behavior in IE.增加高度以适合图像并确保您使用的是 DOCTYPE，这通常会导致 IE 中的不同行为。
<!DOCTYPE html>
<html>...
It might also me the line-height that´s causing your problems.它也可能是导致您出现问题的line-height 。 Read more at http://reference.sitepoint.com/css/line-height在http://reference.sitepoint.com/css/line-height阅读更多
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.