2013-03-12 87 views
0

我在IE8中只有佈局時遇到了一些麻煩。我有一個很大的背景圖片。然後,我希望我的標題詳細信息位於此之上。我用z-index的絕對定位使它坐在最上面。所有其他瀏覽器都很完美,只有IE8給我帶來了問題。它將我的標題放置在大圖像下面。IE8不能正確顯示定位div

這裏是我的代碼

<div id="homepage-banner"> 
    <img class="home-carousel" src="images/banner.jpg" /> 
</div> 
       <header> 
        <div id="logo"> 
          <img src="images/logo.png" /> 
        </div> 

        <div id="header-text"> 
          <p><span style="font-weight:bold; color: white">></span> Call us now on <strong>0800 785 7348</strong></p> 
          <p><span style="font-weight:bold; color: white">></span> <a href="#" style="font-weight: bold; text-decoration: none; color: black">Click here</a> to enquire online</p> 
        </div> 

        <div id="nav-bar"> 
          <img src="images/nav.png" width="980" height="45"/> 
        </div> 
      </header> <!-- header --> 

我的CSS

header { 
    height: 120px; 
    width: 980px; 
    z-index: 1000; 
    position: absolute; 
    top: 25px; } 


#homepage-banner { 
    height: 555px; 
    width: 3000px; 
    margin-left: -1000px; 
    margin-bottom: -210px; 
    background-color: rgb(0,173,239); } 

我怎樣才能改變我的代碼,以便IE8顯示在圖像的頂部我的頭?

+1

你有包括[html5shiv的.js](https://code.google.com/p/html5shiv/)? – vcampitelli 2013-03-12 20:13:34

回答

2

我假設您沒有包含shiv腳本,因爲z-index在IE 8中受支持。因爲您使用HTML 5 <header>元素而不包括html5shiv腳本,因此IE無法正確解析您的標頭,導致你描述的行爲。只要按照我提供的鏈接,並在您<head>該腳本,你將有新的HTML 5元素的支持..

放在一個條件註釋中的<head>

<!--[if lt IE 9]> 
<script src="dist/html5shiv.js"></script> 
<![endif]-->