在IE中切斷的圖像

我在IE中看到奇怪的東西，其中我期望看到的背景圖像沒有出現。在IE中切斷的圖像

這裏是我的CSS：

#grey.internal #leader p{color: #525051;} 
#grey h1 {color: #bc35b7;} 
#grey.internal #for .forcont{ border:none;margin:0;} 
#grey #leader p {font-size: 18px; line-height: 32px; width: 760px; margin: 0 auto; } 
#grey #leader ul.section-links {padding: 32px 0 62px 0; width: 700px; margin: 155px auto 0 auto;height: 100%; border: 1px red solid; } 
#grey #leader ul.section-links li {display: inline-block; margin: 0 6%;} 
* html #grey #leader ul.section-links li { /* for IE6 */ display: inline;} 
*+html #grey #leader ul.section-links li { /* for IE7 */ display: inline;} 
#grey #leader ul.section-links li h2 a {color: #525051; text-decoration: none; height: 100%; border: 1px blue solid;} 
#grey #leader ul.section-links li h2 a:hover {text-decoration: underline;} 
#grey #leader ul.section-links li h2 a.payments {background: url('/_/img/icon-payments.png') no-repeat 0 0; padding: 135px 30px 0 0; } 
#grey #leader ul.section-links li h2 a.identity {background: url('/_/img/icon-identity.png') no-repeat 8px 0; padding: 135px 50px 0 60px; margin-right: 20px;} 
#grey #leader ul.section-links li h2 a.analytics {background: url('/_/img/icon-analytics.png') no-repeat 10px 0; padding: 135px 0 0 0;}

這裏是HTML塊：

<section id="leader"> 
    <p>Lorem</p> 
    <ul class="section-links"> 
     <li class="p-item"><div class="icont"><h2><a href="/mobile-payments/" class="payments">Payments</a></h2></div></li> 
     <li class="i-item"><div class="icont"><h2><a href="/identity/" class="identity">Identity</a></h2></div></li> 
     <li class="a-item"><div class="icont"><h2><a href="/mobile-analytics/" class="analytics">Analytics</a></h2></div></li> 
    </ul> 
</section>

而且這是我在IE中看到（6-8）： IE screenshot

這就是我在Chrome中看到的：

Chrome screenshot

我已經添加了邊框只是爲了讓我知道發生了什麼！

來源

2013-10-23 Gemma Church

我假設您指的是背景：url（'/ _/img/icon-payments.png'），背景：url（'/ _/img/icon-identity .png'）和{background：url（'/ _/img/icon-analytics.png'）你可以在瀏覽器中瀏覽這些圖像嗎？ IE在你的解決方案中正確的文件路徑？ – davidb

嗨，是的，我可以瀏覽他們。 –

你可以做一個演示來顯示問題嗎？ http://jsbin.com//http://jsfiddle.net/，圖像並不重要，但你可以使用http://placekitten.com/或其他東西。 – thirtydot

該問題與<section>標籤有關。因爲它是HTML5，IE9不支持，所以section標籤不會包含任何東西（並且會自動關閉，從而導致你的所有css無用）。或者將其更改爲其他內容，或者包括https://code.google.com/p/html5shiv/

來源

2013-10-23 14:40:39 eithed

在IE中切斷的圖像

回答

相關問題