Проблемы с макетом CSS в IE9

-1

Я работаю над сайтом и в основном излагаю, как я его хочу, но я сталкиваюсь с некоторыми проблемами форматирования с Internet Explorer 9 (IE9). Я выкопал все форумы, читая много позиционирования элементов, и z-index, и я не могу понять, как исправить мою проблему. Если я тестирую свой сайт в Chrome, Firefox, IE11, все выглядит отлично.Проблемы с макетом CSS в IE9

Однако, в IE9 (не уверен около 10) мой div Overlay скрыт за изображениями. На сайте, с которым у меня возникают проблемы, можно найти по адресу 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>

Спасибо,

Дэвид

источник

2014-01-13 hulk66049

вставьте код здесь ... не URL! :) – NoobEditor

мы хотели бы видеть код .... если нам нужно щелкнуть по каждому адресу, опубликованному, наш компьютер станет контейнером-шпионом –

Я добавил код в строку здесь, извините, что просто не захотел загромождать если бы мне не пришлось. :) – hulk66049

Это не выглядит, как вы добавили Z-индекс к вашим #homevideo .overlay класса.

Try:

#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> 
     ...

источник

2014-01-13 16:25:41 MarkP

Я только что проверил это, и он все еще не работает. Из некоторых чтений я сделал это, упомянув, что IE действительно придирчив к родительским элементам и группировке z-индекса, и я задался вопросом, может ли это быть частью моей проблемы, что div Overlay не находится в одном и том же родительском как образ, который он сидит сзади, но я не нашел ничего, что поможет довести его до передней части страницы. – hulk66049

Добавьте объявление DOCTYPE в верхней части страницы (т. Е. Перед тегом ). (ответ обновлен выше) – MarkP

Проблемы с макетом CSS в IE9

ответ

Смежные вопросы