0 
 <body>
  <div id="naslov">
    <img src="image/Conto_logo.png" title="Conto Regis" alt="contologo" />
  </div>
  <div id="izbornik">
    <div id="home">
    </div>
  </div>
</body>

 body {
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size:1.0em;
    font-weight:100;
    margin:0px;
    color:#000;
}
div#naslov {
    height: 128px;
    width: 100%;
    background-image: url(../image/Header.png);
    background-repeat: repeat-x;
}
div#naslov > img {
    cursor:pointer;
    height: 80px;
    margin:20px 0px 0px 20px;
}
div#izbornik {
    width:100%;
    height: 45px;
    background-image: url(../image/izbornik.png);
    background-repeat: repeat-x;
}
#home{
    height:27px;
    width:28px;
    border:#000 1px dashed;
}

I'm having problem positioning div "home" inside div "izbornik" when I use margin-top to pull div "home" a bit down something strange happens. Dreamweaver displays it fine while IE10 and Chrome(latest) display it as if I used margin-top inside div "izbornik". Funny thing is if set div "home" to float:left margin starts acting normal but I'm not sure why, I'll be using some javascript later when the template is completed and I need the page to be very very stable. Any suggestions? http://jsfiddle.net/xNrGR/6/ => in short why does that 8px gap appear there? I need the div "home" to go down not the whole parent-child combo

4

2 に答える 2

1

に追加overflow:autoし#izbornikます。マージンの崩壊の問題のようです。

div#izbornik {
    width:100%;
    height: 45px;
    background: red;
    background-repeat: repeat-x;
    overflow:auto;
}

jsFiddle の例

于 2013-08-23T17:15:02.527 に答える
0

これはマージンの崩壊です。overflow: autoまたはoverflow: hiddenを親divに設定することで、これを修正できます。これにより、コンテンツによっては一部のユーザーに問題が発生する可能性があります。

もう 1 つのオプションは、親 div に境界線を与えることです。境界線を背景と同じ色にすると目立ちません。人々が 1px ボーダーを使用する場合、通常は margin -1px も使用します。これらは、問題に取り組むためのほんの一部の方法です。

デモhttp://jsfiddle.net/kevinPHPkevin/xNrGR/9/

border: thin solid red;

于 2013-08-23T17:27:21.877 に答える