0

我的代码

<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 中

在此处输入图像描述

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

4

3 回答 3

3

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

升级到较新版本的 Internet Explorer 有很多好处 - 提高速度、选项卡式浏览和更好的隐私设置等等。

在过去的 10 年里，网络发生了巨大的变化。浏览器已经发展以适应新的 Web 技术，最新版本的 Internet Explorer 有助于保护您免受新的攻击和威胁。

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

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

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

于 2012-06-26T05:29:50.090 回答
3

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>
于 2012-06-26T05:38:35.883 回答
1

将 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>

这里有一个链接供进一步参考:)驯服 IE6 野兽的权威指南。 如果可能，请停止支持 ie6 。

于 2012-06-26T05:40:02.550 回答