代码之家  ›  专栏  ›  技术社区  ›  meo

边缘溢出问题

  •  0
  • meo  · 技术社区  · 15 年前

    我有一些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;
    }
    

    现在,在火狐中,边缘并不影响UL,而是它周围的DIV(HD)。就好像我在高清上有利润,而不是在UL上……现在它变得奇怪了,如果我设置一个边界为高清,它就工作了!(或者,如果我在保险商实验室工作之前提供了一个nbsp)

    这有多奇怪?有人能告诉我为什么会发生这样的事吗?我怎样才能妥善解决。(它不想设置一个边界使其工作:p)

    2 回复  |  直到 9 年前
        1
  •  0
  •   graphicdivine    15 年前

    看起来你的利润率在下降( http://www.w3.org/TR/CSS2/box.html#collapsing-margins )

    尝试:

    div#cn div#hd ul {display: inline-block}
    
        2
  •  0
  •   Heri Hehe Setiawan    9 年前

    我刚刚遇到了一个类似的问题,通过向父元素添加一些填充来解决它。

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