背景圖片在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/

來源

2011-11-28 pranky64

高度是否必須是自動的？如果沒有，我建議設置一個固定的高度。此外，請嘗試添加'display：block;':) – peduarte

您可以[重現問題]（http://jsfiddle.net/），以便我們可以看到它？ – thirtydot

@thirtydot「重現」的意義?? – pranky64

這是你的解決辦法：

ul { 
    overflow: hidden; 
} 

li { 
    clear:both; 
    float:left; 
}

來源

2011-11-28 12:32:45 peduarte

謝謝它的工作原理......但你能告訴我究竟是什麼問題 – 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

來源

2011-11-28 11:18:47 Stefan

我放置圖像的元素的高度與圖像高度完全相同！.....並且是的，我正在使用正確的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; 
}

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

來源

2015-05-27 08:56:01

背景圖片在IE7中沒有正確顯示

回答

相關問題