IE CSS Overlay Help

Question

Код ниже работает как шарм в Firefox и Safari, но я не могу заставить его работать в IE вообще. В IE нет наложения вообще. Может ли кто-нибудь помочь мне получить его в IE.

http://pastebin.com/Kv4MbYyc
Я положил его на Pastebin, так как форматирование кода тег не будет работать для меня.

HTML:

<div class="image"> <img src="Picture.jpg"/> 
    <itext><span>Text at top</span></itext> 

    <stext><span>Text at bottom</span></stext> 
</div> 

CSS:

.image { 
    position: relative; 
    width: 100%; 

} 

itext span { 
    position: absolute; 
    Top: 20; 
    left: 0.5em; 
    width: 95%; 
    font: bold 45px/75px Helvetica, Sans-Serif; 
    color: #fff; 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.6); 
    text-align: center; 
} 

stext span { 
    position: absolute; 
    Bottom: 0; 
    left: 0.5em; 
    width: 95%; 
    font: 20px/30px Helvetica, Sans-Serif; 
    padding:10px 20px; 
    color: #FFFFFF; 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.7); 
    text-align: Left; 
} 

Answer 1

Вы должны использовать <div class="itext"> вместо <itext> и <div class="stext"> вместо <stext>.

Кроме того, добавив display: inline, вы избавитесь от необходимости использовать <span>.

Answer 2

Если вы хотите поддерживать HTML5 с помощью настраиваемых тегов, IE не поддерживает их. Вы можете использовать альтернативу и использовать div, вероятно, с id. Вот пример кода:

HTML

<div class="image"> <img src="Picture.jpg"/> 
    <div id="itext"><span>Text at top</span></div> 

    <div id="stext"><span> 
     Text at bottom 
     </span></div> 

</div> 

CSS

.image { 
    position: relative; 
    width: 100%; 

} 

#itext span { 
    position: absolute; 
    Top: 20; 
    left: 0.5em; 
    width: 95%; 
    font: bold 45px/75px Helvetica, Sans-Serif; 
    color: #fff; 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.6); 
    text-align: center; 
} 

#stext span { 
    position: absolute; 
    Bottom: 0; 
    left: 0.5em; 
    width: 95%; 
    font: 20px/30px Helvetica, Sans-Serif; 
    padding:10px 20px; 
    color: #FFFFFF; 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.7); 
    text-align: Left; 
} 

Пример: http://jsfiddle.net/q4CqZ/12/

Конечно, вы увидите, что фон в IE будет черным, чтобы достичь непрозрачности для интернет-исследователя, вы можете использовать

opacity: 0.5; 
    filter: alpha(opacity = 50); 

Подробнее: http://joseph.randomnetworks.com/2006/08/16/css-opacity-in-internet-explorer-ie/