Floating div overlap msie_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-11 23:37 出处：网络

Ive been banging my head with why MSIE8 doesnt overlap the floating div just as webkit a mozilla both do. I hope you guys can help me out with this one.

相关专题：css

Ive been banging my head with why MSIE8 doesnt overlap the floating div just as webkit a mozilla both do. I hope you guys can help me out with this one.

I have the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="style" href="style.css" type="text/css" />
  </head>
  <body style="margin: 0px; background: #3b0404;">
      <div align="center">
          <div id="top" style="height: 100px; background: yellow; width: 100%;max-height: 100px; ">
              <div style="overflow: visible; width: 800px; height: 100px; max-height: 100px; background: aquamarine;">
                <div id="logo" style="float: left; margin-left: -3px; width: 203px; height: 201px; background: pink; overflow: visible;"></div>
                <div id="menu" style="float: right; width: 595px; height: 100px; background: blue;"></div>
              </div>
          </div>
          <div id="content" style="width: 800px; margin-left: auto; margin-right: auto;">
              <div style="background: purple; height: 215px;"></div>
              <div style="background: green; height: 350px;"></div>
          </div>
          <div id="bottom"></div>
      </div>
  </body>
</html>

I need the pink 开发者_运维技巧div to overlap the purple one while maintaining dimensions, however MSIE8 keeps expanding the containing divs so it pushes everything down instead of the desired behaviour.

I hope my question is clear, I dont know if Im doing something wrong and should take a different approach.

Thanks for your help!!

It was the transitional DOCTYPE .. it looked fine on JSFiddle cause it added the strict dtd.

Thanks to everyone for your time.