IE8不能正确显示定位的div

我只在IE8中有一些布局问题。我有一个大的背景图像，这很好。然后我想让我的头部细节放在这个上面。我使用了带有z-index的绝对定位来让它位于顶部。其他浏览器都很完美，只有IE8有问题。它将我的标题定位在大图下方。

我的代码

<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显示我的标题在图像的顶部?

我假设您没有包含shiv脚本，因为IE 8支持z-index。由于您使用的是HTML 5 <header>元素而没有包含html5shiv脚本，因此IE无法正确解析您的标题，从而导致您所描述的行为。只要遵循我提供的链接，并将该脚本包含在您的<head>中，您就可以支持新的HTML 5元素。

把它放在<head>的条件注释中

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

相关内容

最新更新

热门标签：