页首使用链接标签/锚点链接时的微小切断（仅限FF） [英] Top of Page Slightly Cutoff When Using Hashtag/Anchor Links (FF Only)

问题描述

这是此问题的第2部分： Hash（＃）链接原因跳转 - 为什么？。

This is part 2 of this question: Hash(#) Link Causes Content To Jump - Why?.

根本问题实际上是只发生在FireFox中的（我的道歉，不是把原来的问题）。当我把小提琴放在一起时，我以为我已经跨浏览器重新创建了它，但是即使有修复，是由 SkyOut 建议的，问题仍然无法在FF中解决。

The root issue is actually something that's only occurring in FireFox (my apologies for not bringing this up in the original question). When I put together the Fiddle, I thought I had recreated it cross-browser, but even with the fix that was suggested by SkyOut, the issue is still not resolved in FF.

以下是原文： http://jsfiddle.net/GKCE6/10/show

以下是网址中包含hashtag的版本： http://jsfiddle.net/GKCE6/10/show/#some-content 。

And here's the version with the hashtag in the URL: http://jsfiddle.net/GKCE6/10/show/#some-content.

这次有点难通知，但你可以看到'链接'在顶部稍微截止（只是在FF）。我从原来的Fiddle中删除了 height：1000px 规则，只是为了验证，虽然问题在Chrome上得到修复，但在FF仍然有一个类似的问题。

This time it's a bit harder to notice, but you can see that 'A link' is slightly cutoff at the top (just on FF). I removed the height: 1000px rule from the original Fiddle, just to verify that, while the issue gets fixed on Chrome, there's still a similar issue in FF.

任何想法？

小提琴： http://jsfiddle.net/GKCE6/10

UPDATE 1 / 17/2014 我实际上发现了这个问题 - 似乎是使用'clearfix'的height属性的结果。如果您将此小提示与此 fiddle （在FF中），你会看到我的意思。删除 height：0 可修复它。任何想法为什么会打破FF在这一个，微小的实例？

UPDATE 1/17/2014 I actually found the problem - seems like it's a result of the height property in the 'clearfix' that's being used. If you compare this fiddle with this fiddle (in FF), you'll see what I mean. Removing the height:0 fixes it. Any idea why that would be breaking FF in this one, tiny instance?

推荐答案

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

我把你所有的宽度都取下，这将使它更流畅/响应屏幕尺寸。另外你的导航是崩溃，因为它内的浮动元素，所以我添加了一个明确的类，并清除了您的导航中的浮动。

I took the off all of the set widths that you had, which will make it more fluid/responsive to the screen size. Also your nav was collapsing because of the floated elements inside of it, so I added a clear class and cleared the floats in your nav.

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）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！