IE9 上的 CSS 布局问题答案

【问题标题】：CSS Layout Issues on IE9IE9 上的 CSS 布局问题
【发布时间】：2014-01-13 16:14:55
【问题描述】：

我正在开发一个网站，主要是按照我想要的方式进行布局，但是我遇到了 Internet Explorer 9 (IE9) 的一些格式问题。我已经在论坛中挖掘了很多元素的定位和z-index，但我对如何解决我的问题一无所知。如果我在 Chrome、Firefox、IE11 中测试我的网站，一切看起来都很好。

但是，在 IE9（不确定 10）中，我的 Overlay div 隐藏在图像后面。我遇到问题的网站可以在 http://ktwu.trilionstudios.com/wp-content/themes/ktwu/csstest.html 找到我目前正在使用静态页面进行测试，但最终这将被移动到常规模板和动态生成的内容中。

<html>
    <head>
        <title>Test Page</title>
        <style media="screen" type="text/css">

/*****CSS RESET*******/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, h7, h8, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {  margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }

#slider4 ul, #slider4 li {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

#slider4 li {
    height: 345px;
    width: 960px;
    float: left;
    border: 1px solid red;
}

#homevideo .leftvideo{
    position: relative;
    height: 345px;
    width: 650px;
    float: left;
    margin: 0px;
    padding: 0px;
}

#homevideo a{
    float: left;
    display: block;
}

#homevideo .leftvideo img{
    position: relative;
    height: 345px;
    width: 650px;
}

#homevideo .rightvideogroup{
    float: right;   
    width: 300px;
}

#homevideo .rightvideo1 {
    position: relative;
    height: 168px;
    width: 300px;
    margin-bottom: 9px;
}

#homevideo .rightvideo2 {
    position: relative;
    height: 168px;
    width: 300px;
}

#homevideo .rightvideo1 img{
    position: relative;
    width: 300px;
    height: 168px;
}

#homevideo .rightvideo2 img{
    position: relative;
    width: 300px;
    height: 168px;
}

#homevideo h3{
        clear: both;
    }

#homevideo .overlay {
    position: absolute;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.83);
    bottom: 5%;
    left: 0px;
    padding: 0% 0%;
    width: 100%;
}



        </style>
    </head>
    <body>
        <div id="homevideo">
            <div id="slider4">
                <ul>
                    <li>
                        <div class="leftvideo">
                            <a href="http://watch.ktwu.org/video/2365060152"><img src="http://image.pbs.org/video-assets/KTWU/ktwu-special-programs/93697/images/Mezzanine_323.jpg" alt=""></a>
                            <div class="overlay">
                                <h4><a href="http://www.pbs.org/wgbh/masterpiece/">Sunflower Journeys</a></h4>
                                <h3><a href="http://watch.ktwu.org/video/2365143420">Wood, Brick, and Stone</a></h3>
                            </div>
                        </div>
                        <div class="rightvideogroup">
                            <div class="rightvideo1">
                                <a href="http://watch.ktwu.org/video/2365143420"><img src="http://image.pbs.org/video-assets/pbs/masterpiece/109334/images/Mezzanine_171.jpg" alt=""></a>
                                <div class="overlay">
                                    <h4><a href="http://www.pbs.org/wgbh/masterpiece/">Masterpiece</a></h4>
                                    <h3><a href="http://watch.ktwu.org/video/2365143420">Downton Abbey Season 4, Episode 1</a></h3>
                                </div>
                            </div>
                            <div class="rightvideo2">
                                <a href="http://watch.ktwu.org/video/2365145009"><img src="http://image.pbs.org/video-assets/KTWU/ktwu-ive-got-issues/109621/images/Mezzanine_142.jpg" alt=""></a>
                                <div class="overlay">
                                    <h4><a href="http://www.ktwu.org/productions/ive-got-issues/">KTWU I've Got Issues</a></h4>
                                    <h3><a href="http://watch.ktwu.org/video/2365145009">Philippine Calamity</a></h3>
                                </div>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

谢谢，

大卫

【问题讨论】：

请在此处粘贴代码...不是网址！！ :)
我们希望看到代码......如果我们必须点击每个发布的网址，我们的电脑将成为间谍软件容器
我在这里添加了内联代码，对此感到抱歉，只是不想在不必要的情况下弄乱页面。 :)

标签： css internet-explorer-9

【解决方案1】：

您似乎没有为 #homevideo .overlay 类添加 z-index。

试试：

#homevideo .overlay {
position: absolute;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.83);
bottom: 5%;
left: 0px;
padding: 0% 0%;
width: 100%;
z-index: 100;
}

您还应该在页面顶部添加一个 doctype 声明。我建议使用以下内容：

<!DOCTYPE html>
  <html>
    <head>
      ...

【讨论】：

我刚刚测试了这个，它仍然无法正常工作。从我所做的一些阅读中提到 IE 对父元素和 z-index 的分组非常挑剔，我想知道这是否可能是我的问题的一部分，即 Overlay div 不在同一个父级中组作为它坐在后面的图像，但我没有找到任何有助于将它带到页面前面的东西。
在页面顶部添加 DOCTYPE 声明（即在标签之前）。（上面更新的答案）