保证金顶部在IE 6中不起作用

Question

我的代码

<div id="header">
<div id="header_top">KIDS'<br>ZONE</div>
</div>

CSS

#header{
        width:1024px;
    height:150px;
    background:url('../images/Orange.jpg');
    background-repeat:no-repeat;
    background-size:1024px 150px;
}
#header_top
{
    background:#842DCE;
    width:125px;
    height:70px;
    float:left;
    margin-left:50px;
    margin-top:-20px;
    color:white;
    text-align:center;
    font-family:"Times New Roman", Times, serif;
    font-size:25px;
    padding-top:5px;
    opacity:1;
    font-weight:bold;

}

我在IE以外的其他浏览器中的结果

在IE中

可能很简单，我很挣扎，请帮帮我

Answer 1

你应该认真放弃IE6的支持。根据他们的IE6 Countdown网站，即使微软也在提倡这一点：

  

升级到较新版本的Internet Explorer有很多好处 - 提高速度，标签式浏览和更好的隐私设置，仅举几例。

     

过去10年来，网络发生了重大变化。浏览器已经发展到适应新的Web技术，最新版本的Internet Explorer可以帮助您抵御新的攻击和威胁。

     

我们建议Internet Explorer 6用户升级到较新版本的Internet Explorer，以获得更安全的浏览体验。

在某些时候，你真的只需要继续前进。现在很少有人明确支持Netscape Navigator或Lynx浏览器，或者使用Fortran，BCPL或RCA1802汇编语言编写代码。并且有充分的理由。

而且，如果您是那些仍然坚持使用IE6的组织之一，因为它“正常”（哈！），那么上面该链接上的 Educate 部分一些资源可以帮助你。

Answer 2

CSS

    #header{background-color:#FF6600; height:150px; margin-top:100px; position:relative; overflow:visible;}
#header_top{width:100px; height:50px; position:absolute; top:-20px; left:25px; background-color:#CC0099;}

HTML

    <div id="header">
         <div id="header_top"></div>
    </div>

Answer 3

为子元素分配position：absolute

例如：

<style>
#header {width:220px; height:150px; background-color:blue; margin:100px; position:absolute}
#header_top {width:200px; height:130px; background-color:yellow; text-align:justify; margin-top:-50px; position:absolute}
</style>

这是一个供进一步参考的链接:) Definitive Guide to Taming the IE6 Beast。 如果可能，请停止支持ie6。