Fatal编程技术网
  • css/
  • IE9上的CSS布局问题

IE9上的CSS布局问题

css

IE9上的CSS布局问题,css,internet-explorer-9,Css,Internet Explorer 9,我在一个网站上工作，主要是按照我想要的方式进行布局，但我在使用IE9时遇到了一些格式问题。我在论坛上翻遍了所有的文章，阅读了很多关于元素和z-index的定位，对于如何解决我的问题，我还是一片空白。如果我在Chrome、Firefox和IE11上测试我的网站，一切看起来都很好 然而，在IE9中（不确定大约10），我的覆盖div隐藏在图像后面。我遇到问题的站点可以在我目前正在测试的静态页面上找到，但最终它将被移动到常规模板中并动态生成内容 <html> <head>

我在一个网站上工作，主要是按照我想要的方式进行布局，但我在使用IE9时遇到了一些格式问题。我在论坛上翻遍了所有的文章，阅读了很多关于元素和z-index的定位，对于如何解决我的问题，我还是一片空白。如果我在Chrome、Firefox和IE11上测试我的网站，一切看起来都很好

然而，在IE9中（不确定大约10），我的覆盖div隐藏在图像后面。我遇到问题的站点可以在我目前正在测试的静态页面上找到，但最终它将被移动到常规模板中并动态生成内容

<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重置*******/
html，body，div，span，applet，object，iframe，h1，h2，h3，h4，h5，h6，h7，h8，p，blockquote，pre，a，abbr，首字母缩写，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、字段集、表单、标签、图例、表格、标题、tbody、tfoot、thead、tr、th、td{边距：0；填充：0；边框：0；轮廓：0；字体大小：100%；垂直对齐：基线；背景：透明；}
正文{行高：1；}
ol，ul{列表样式：无；}
blockquote，q{quotes:none；}
blockquote:before，blockquote:after，
q:before，q:after{content:''；content:none；}
：焦点{大纲：0；}
ins{文本装饰：无；}
del{text装饰：线穿过；}
表{边框折叠：折叠；边框间距：0；}
#滑块4 ul，#滑块4 li{
边际：0px；
填充：0px；
列表样式：无；
}
#幻灯片4李{
高度：345px；
宽度：960px；
浮动：左；
边框：1px纯红；
}
#家庭视频，左视频{
位置：相对位置；
高度：345px；
宽度：650px；
浮动：左；
边际：0px；
填充：0px；
}
#家庭视频a{
浮动：左；
显示：块；
}
#homevideo.leftvideo img{
位置：相对位置；
高度：345px；
宽度：650px；
}
#homevideo.rightvideogroup{
浮动：对；
宽度：300px；
}
#家庭视频。对视频1{
位置：相对位置；
高度：168px；
宽度：300px；
边缘底部：9px；
}
#家庭视频，右视频2{
位置：相对位置；
高度：168px；
宽度：300px；
}
#homevideo.rightvideo1 img{
位置：相对位置；
宽度：300px；
高度：168px；
}
#homevideo.RightVideo2IMG{
位置：相对位置；
宽度：300px；
高度：168px；
}
#家庭视频h3{
明确：两者皆有；
}
#家庭视频。覆盖{
位置：绝对位置；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.83）；
底部：5%；
左：0px；
填充：0%0%；
宽度：100%；
}

    

  • 

    •
谢谢

David

看起来您并没有将z索引添加到您的#homevideo.overlay类中

尝试：

您还应该在页面顶部添加doctype声明。我建议使用以下方法：

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


...
请在此处粘贴代码…而不是url！！：）我们想看看代码。。。。如果我们必须点击发布的每个url，我们的电脑就会变成间谍软件容器。我在这里内联添加了代码，对此表示抱歉，如果我不必这样做，我只是不想把页面弄得乱七八糟。：）我刚刚测试过这个，但仍然不起作用。在一些阅读资料中，我提到IE对父元素和z索引的分组非常挑剔，我想知道这是否是我的问题的一部分，即覆盖div与它后面的图像不在同一父组中，但是我没有找到任何有助于将其放在页面前面的内容。请在页面顶部（即标记之前）添加DOCTYPE声明。（以上更新的答复） 
<!DOCTYPE html>
  <html>
    <head>
      ...