html - position:fixed cause margin-top disappear? -


things want achieve quite simple

  • just @ top fixed position element not move while scrolling down document.
  • and after div#content have margin-top top edge , center in window.

so code is: html

<div class='head-container' id="headercom">     <header id="a"></header> </div> <div id="content" role="main"></div> 

css

 * {         margin: 0;         padding: 0     }     body {         width: 100%;         height: 100%;         position: relative;     }     .head-container {         position: fixed;         top:0;         left:0;         width: 100%;         height: 100px;         background: red;         _position:absolute; // make ie6 support fixed position         _top: expression(eval(document.documentelement.scrolltop)); // make ie6 support fixed position     }     header {         display: block;         width: 960px;         height: 100px;         margin: 0 auto;         position: relative;         zoom: 1;         background: blue;     }     #content {         border: 1px solid black;         margin: 130px auto 0 auto;         width: 960px;         height: 1000px;         background: #999;         margin-top: 150px;     } 

all modern browser support,but in ie(ie7,ie8,ie10) not work correctly,things ignore margin-top set div#content;

so far have checkout other question on stackoverflow,and try everthing could.

  • when change margin-top of div#content padding-top,things okay.

  • when put div.clear(clear:both)in between div.header-container , div#conetent,the things goes okay;

  • or follow other questions' solution caused haslayout, , take out width , height of div#content, things okay, in way, need put div#inner-content inside div#content, , set width , height see result.

so quite confused haslayout, , not quite sure understand , not quite sure happening in here in code.

so can me this, there other solution fix problem, , explain wired things me?

thank anyway.

it works fine me once rid of last margin-top attribute. know have set twice? once margin , them again margin-top. if edit margins first value wouldn't work because last 1 override first one.


Comments

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

javascript - addthis share facebook and google+ url -

ios - Show keyboard with UITextField in the input accessory view -