Question

这是这个问题的第2部分：Hash(#) Link Causes Content To Jump - Why?。

根本问题实际上只发生在FireFox中（我抱歉没有在原始问题中提出这个问题）。当我将Fiddle放在一起时，我认为我已经跨浏览器重新创建了它，但即使使用SkyOut建议的修复，问题仍未在FF中解决。

以下是网址中带有主题标签的版本：http://jsfiddle.net/GKCE6/10/show/#some-content。

这一次有点难以注意到，但你可以看到“A link”在顶部略有截止（仅在FF上）。我从原来的小提琴中删除了height: 1000px规则，只是为了验证，虽然问题在Chrome上得到修复，但在FF中仍存在类似的问题。

有什么想法吗？

更新2014年1月17日 我实际上发现了问题 - 似乎是'clearfix'中正在使用的高度属性的结果。如果您将此fiddle与此fiddle（在FF中）进行比较，您会看到我的意思。删除height:0会修复它。知道为什么会在这个微小的实例中打破FF吗？

Answer 1

编辑：再看看你的小提琴，这次我更新了一些。 http://jsfiddle.net/GKCE6/12/

我取下了你所拥有的所有设定宽度，这将使它更流畅/响应屏幕尺寸。此外，由于其中的浮动元素，导航器正在折叠，因此我添加了一个清晰的类并清除了导航中的浮动。

html {
    margin: 0;
    padding: 0;
    background: none repeat scroll 0 0 #FFFFFF;
    height: 100%;
    width: 100%;
}
body {
    min-height: 100%;
}
#container {
    margin: 0 auto;
    overflow: hidden;
    position: static;
    width: 100%;
    height: auto;
}
nav {
    border-bottom: 1px solid #E6E6E6;
    margin: 0 auto;
    padding: 1em 0 0.2em;
    display: block;
}
nav h2 {
    float: left;
    display: inline;
}
nav a {
    float: right;
    display: inline;
}
#content:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
#content {
    border: medium none;
    border-radius: 0;
    box-shadow: none;
    margin: 0 auto;
    padding: 0;

}

.clear {
   clear:both;
}

返回页首使用标签/锚链接时略有截止（仅限FF）

1 个答案: