Question

我运行的网站上的许多网页都有http://www.site.co.uk/index.php#calendar形式的本地化链接。这些工作按预期工作 - 将浏览器带到IE和Chrome中的calendar网页index.php部分，但是较新版本的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个标题和6个段落块。使用index.php#text1 访问该页面时，只有第二个标题和段落块显示在Firefox 上。

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

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

所以，总结一下：

看完这篇文章后，你能告诉我如何分步甚至解决这个问题吗？或者，如果有一些语法错误，我已经造成了这个问题，我该怎么做才能纠正这种行为？

最后：在测试网站页面上可以找到一个包含问题的测试页面：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"。

中

页内书签链接问题

1 个答案: