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

边缘溢出问题

css html

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 回复 | 直到 10 年前

graphicdivine 15 年前

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

尝试:

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

Heri Hehe Setiawan 10 年前

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

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

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

Mass · 如何在Tailwind CSS v4中创建配置

4 月前

magenta placenta · 将css变量合并为一个变量

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

5 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

5 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

5 月前

Luckkks · 过渡色工作不正常

5 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

5 月前