0

我遇到了一个奇怪的问题，我只在 Safari 中遇到过（Mac 上的 7 - 不了解 Windows）。

当用户缩小时，标题上方会出现一个空格。在 100%（无缩放）或放大时，没有空间。

根据过去的经验，我决定尝试添加 padding-top（不起作用）和 border-top，这确实有效。

所以 - 我希望这里有人可以向我解释：

  1. 你知道为什么border-top会解决这个问题吗？
  2. 这是一个 Safari 错误，还是我误解了什么？
  3. 有没有更好的方法来解决这个问题？对于这个特定的客户来说，边界顶部将是一个问题，我想找到一个更清洁的解决方案。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>My Title</title>
    </head>
    <body>
        <div id="headerwrapper">
            <div id="headerliner">
                <header>
                    <nav class="menu">
                        <ul>
                            <li><a href="#">Top Level Menu Item</a>
                                <ul class="sub-menu"><li><a href="#" >Child Menu Item</a></li></ul>
                            </li>
                        </ul>
                    </nav>
                </header>
            </div>
        </div>
    </body>
</html>

CSS：

html, body {
    margin: 0;
    padding: 0;
}
#headerwrapper {
    margin: 0;
    padding: 0;
}
#headerliner {
    margin: 0;
    padding: 0;
}
header {
    background: black;
    margin: 0 auto;
    padding: 1px 0 0 0;
    /* Remove the below line, and the space appears in Safari */
    border-top: 1px solid black;
}
4

2 回答 2

1

有没有更好的方法来解决这个问题？

要找到解决此问题的方法而不是使用一些border-tophack，让我们检查元素并找出问题的根本原因。缩小时上面有空格的原因是因为默认情况下，Safari 会给出margin-top: 16px和margin-bottom: 16px给<ul>元素。

ul边际分析

所以要修复它，只需执行

ul {
    margin-top: 0;
}

请参阅整页演示。（这里小提琴）

根据您的评论：

我在此代码的完整生产版本中面临的问题是导航应该从标题/包装器元素的顶部向下 36px，因此边距是特定的、有意的和必要的

您始终可以padding-top在您的<nav>元素上使用而不是margin-top在<ul>（演示）上使用。

nav.menu {
    padding-top: 36px;
}

为什么border-top会解决这个问题？这是 Safari 的错误吗？

要知道为什么要border-top修复它，让我们看一下W3C 关于折叠边距的规范：

折叠边距

在 CSS 中，两个或多个框（可能是或可能不是兄弟）的相邻边距可以组合形成一个边距。... 相邻的垂直边距折叠... 水平边距永远不会折叠。

两个边距相邻当且仅当......都属于参与相同块格式化上下文的流入块级框，没有行框，没有间隙，没有填充和没有边框将它们分开......

<header>以下是关于和的两种情况的比较<ul>。

比较

没有边框， (parent) 和(child) 的 没有什么可以分开，margin-top折叠的边距最终在 parent 之外，导致出现空白。但是，使用 a将它们分开，边距不再折叠，并且of最终在父级内部，并且空间消失了。<header><ul>border-topmargin-top<ul>

于 2013-11-16T14:48:34.840 回答
0

您是否使用整体 CSS 重置？我强烈推荐它，并将它们用于我所有基于 CSS 的主题。我并不是说这会解决每个问题，但总有机会。默认情况下，并非每个浏览器都是相同的，而且您会在很长一段时间内遇到错误。

于 2013-11-16T05:45:46.033 回答