Question

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

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

根据过去的经验，我决定尝试添加padding-top（没有工作）和border-top，做工作。

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

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

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

Answer 1

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

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

ul margin analysis

所以要修复它，只需执行

ul {
    margin-top: 0;
}

见full page demo。（fiddle here）

根据你的评论：

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

您始终可以使用padding-top元素上的<nav>代替margin-top <ul>上的nav.menu { padding-top: 36px; }。

border-top

为什么border-top会修复此问题？这是Safari的错误吗？

要知道为什么<header>修复了它，让我们来看看demo：

折叠边距

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

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

以下是<ul>和margin-top两个案例的比较。

comparison

没有边框，没有任何内容可以将<header>（父级）的<ul>与border-top（子级）和W3C specifications on collapsing margins的margin-top分开，从而导致白色空间出现。但是，如果<ul>将它们分开，则边距不会再崩溃，{{1}}的{{1}}最终会在父级内部结束，并且空格会消失。

Answer 2

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

Safari中的缩放问题 - 为什么Border-top会修复它，还有另一种方法吗？

2 个答案:

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

为什么border-top会修复此问题？这是Safari的错误吗？

折叠边距