保證金溢出問題

我有一些CSS的問題。這是我的HTML保證金溢出問題

<body> 
<div id="cn"> 
    <div id="hd"> 
     <ul> 
      <some li's> 
     </ul> 
    </div><!-- /#hd --> 
    <div id="bd"> 
    </div><!-- /#bd --> 
    <div id="ft"> 
    </div><!-- /#ft --> 
</div><!-- /#cn -->

，並有我的CSS：

div#cn { 
    position: relative; 
    width: 960px; 
    margin: 0 auto; 
    background: #f7f7f7; 
} 

div#cn > * { 
    position: relative; 
} 

div#cn div#hd { 
    height: 258px; 
    background: #f7f7f7 url(../img/hd.jpg); 
} 

div#cn div#hd ul { 
    margin: 50px 0 0 0; 
    padding: 0; 
    list-style-type: none; 
} 

div#cn div#hd ul li { 
    float: left; 
} 

div#cn div#hd ul li a { 
    display: block; 
    height: 35px; 
    padding: 20px 25px 0 25px; 
    font-weight: bold; 
    background: pink url(../img/nava.jpg) right 0 no-repeat; 
}

現在的利潤率是不影響Firefox中的UL，但在div周圍（#hd）。它就像我有#hd的邊緣，而不是UL ...現在它變得奇怪，如果我設置邊界#hd它的作品！（或者如果我在UL工作之前接觸它）

這有多奇怪？有人可以告訴我爲什麼會發生這種情況，以及我如何正確解決這個問題。（它不想設置邊框使其工作：P）

來源

2009-12-15 meo

看起來像你的利潤率正在崩潰（http://www.w3.org/TR/CSS2/box.html#collapsing-margins）。

嘗試：

div#cn div#hd ul {display: inline-block}

來源

2009-12-15 10:52:43 graphicdivine

THX的鏈接.inline塊不會對IE6的工作：/ – meo 2009-12-15 13:22:47

你不是說這是一個Firefox的問題？ – graphicdivine 2009-12-15 13:44:19

我剛剛碰到過類似的問題，並通過簡單地添加一些補白父元素解決它。

div#cn div#hd{ padding: 1px 0; margin: -1px 0; }

來源

2015-02-08 14:22:54

保證金溢出問題

回答

相關問題