In-page 书签 link 问题

Question

我运行网站上的许多页面都有 http://www.site.co.uk/index.php#calendar 形式的本地化链接。这些按预期工作 - 在 IE 和 Chrome 中将浏览器带到网页 index.php 的 calendar 部分，但是较新版本的 Firefox 似乎有一个问题，因为它们是 只在页面显示选择的id区域.

例如；我有一个包含以下 HTML 内容的页面（假设名称是 index.php ）：

<!DOCTYPE html>
<html class="no-js" lang="en-GB"> 
<head>
    <meta charset="utf-8">
    <title>Control Panel</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <link rel="canonical" href="http://www.site.co.uk/avail/index.php" >

    <!-- JAVASCRIPTS -->
    <script src="/includes/js/jquery-1.11.0.min.js"></script>

    <!-- STYLE SHEETS  -->
    <link rel="stylesheet" href="/includes/css/normalize.css">
    <link rel="stylesheet" href="/includes/css/sitewide.css">
    <link rel="stylesheet" href="/includes/css/control.css">
</head>
<body>
<main>
<nav>...</nav>
<h1>A Heading</h1>
<section>    
    <h2>Heading H2 one</h2>
    <p>some text</p>
    <p>some more text</p>
    <p>Bulking text, etc etc etc.</p>
    </section>  
<section>
    <h2><a id='text1'></a>Section 2</h2>
    <p>some text</p>
    <p>some more text</p>
    <p>Bulking text, etc etc etc.</p>
</section>
</main>
</body>
</html>

因此，当在 index.php 访问页面时，将显示整个页面 - 2 header 和 6 个段落块。当使用 index.php#text1 访问页面时，只有第二个 header 和段落块在 Firefox.

上显示

我在 HTML5 的几个不同站点上注意到了这一点。几点：

页面的呈现仅在出现 id 标记的 DOM 级别开始。例如，如果 id 标记出现在 <section> 中，则仅显示该部分和所有 parent 元素。
这不受已弃用的锚 name 属性的影响。
这不受 id 标记位于何处或位于哪个元素中的影响。
此效果似乎不受 CSS/JS 基础样式器的影响，例如 normalize.css 或 bootstrap。 modernizer 中存在细微差别，其中页面加载时出现问题，但随后刷新页面会显示整个页面 但不会将浏览器聚焦 window id 标签区域。
当通过 Firebug 查看站点时，整个站点源代码都存在（但未显示），firebug 也似乎没有显示我发现的任何 display:none;。
我的页面是 W3C HTML5 根据从 W3C 验证程序链接的 Nu-HTML 检查程序有效。

所以，总结一下：

看完这篇文章后，你能告诉我如何回避甚至解决这个问题吗？或者，如果我犯了一些语法错误导致了这个问题，我该怎么做才能纠正这种行为？

最后：可以在测试站点页面上找到一个包含问题的测试页面：http://www.walberswick.org.uk/index.php

Answer 1

问题似乎出在您的 css 上。单击时，所有浏览器都会出现一些奇怪的溢出错误。我玩了一会儿，然后更改了这些：

@media only screen and (min-width: 801px)
.leftSideText {
    padding: 2px 2px 2500px 2px;
    margin-bottom: -2500px;
    float: left;
    width: 48%;
}

@media only screen and (min-width: 801px)
.imgSideText {
    padding: 1px 1px 2500px 1px;
    margin-bottom: -2500px;
    float: right;
    width: 48%;
}

这些：

@media only screen and (min-width: 801px)
.leftSideText {
    padding: 2px 2px 2500px 2px;
    display: inline-block;
    width: 48%;
}

@media only screen and (min-width: 801px)
.imgSideText {
    padding: 1px 1px 2500px 1px;
    display: inline-block;
    width: 48%;
    vertical-align: top;
}

一切正常。

注意一点。使用 display: property 而不是 float: property 或 flexbox。确保每页只有一个 main 元素并包含它 role="main".

In-page 书签 link 问题

In-page bookmark link issue

html

anchor