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中的背景会是黑色的，为了实现你可以使用的Internet Explorer的不透明度

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

更多：http://joseph.randomnetworks.com/2006/08/16/css-opacity-in-internet-explorer-ie/

IE CSS叠加帮助

2 个答案: