Question

 <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;
}

我在div“izbornik”里面有div“home”的问题，当我使用margin-top将div“home”拉下来时会发生一些奇怪的事情。 Dreamweaver显示它很好，而IE10和Chrome（最新）显示它就像我在div“izbornik”中使用margin-top一样。有趣的是，如果设置div“home”浮动：左边距开始表现正常，但我不知道为什么，我将在模板完成后使用一些javascript，我需要页面非常稳定。有什么建议？ http://jsfiddle.net/xNrGR/6/ =＆gt;简而言之，为什么会出现8px的差距呢？我需要div“home”而不是整个亲子组合

Answer 1

将overflow:auto添加到#izbornik。似乎是一个崩溃的利润率问题。

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

<强> jsFiddle example

Answer 2

这是collapsing margins。您可以通过将overflow: auto或overflow: hidden设置为父div来解决此问题。根据您拥有的内容，这可能会导致某些用户出现问题。

另一种选择是给父div一个边框。如果你将边框作为背景的山姆颜色，那就不会引人注意了。当人们使用1px边框时，他们通常也使用边距-1px。这些只是解决问题的一些方法。

DEMO http://jsfiddle.net/kevinPHPkevin/xNrGR/9/

border: thin solid red;

CSS margin-top影响外部<div> </div>

2 个答案: