页内书签链接问题

我运行的网站上的许多页面都以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个标题和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

问题似乎与你的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"。

相关内容

最新更新

热门标签：