Nic*_*ris 5 html css firefox mobile cross-browser
我有一个包含多个部分的主页 - 每个部分都链接到主菜单:
<body>
<header>
<!-- nav used on all pages -->
<a href="#nav" class="toggle-nav">
menu <i class="fa fa-bars"></i>
</a>
<nav class="main-nav" id="nav">
<a href="/#item1">Link</a>
<a href="/#item2">Link</a>
</nav>
</header>
<!-- homepage -->
<main>
<section id="item1">some content here </section>
<section id="item2">some other content here </section>
</main>
</body>
(可能)相关的CSS:
body {
position: relative;
overflow-x: hidden;
}
@media only screen and (max-width: 750px) {
header .main-nav a {
display: block;
}
.tiggle-nav {
display: none;
}
}
我的想法是,我应该可以点击整个网站菜单中的"第1项",然后登陆主页的特定部分.
这非常有效,除了在firefox移动设备上,从任何其他内部页面点击主页内部锚点链接将导致主页加载距离预期位置100到200px之间的任何位置.
有趣的是,如果我在首页加载后刷新页面,firefox mobile可以找到没有问题的内部锚点 - 这只是从内部页面导航到主页时的问题.
这里发生了什么？这是否与firefox移动设备有关,直到找到内部锚点后才加载CSS ？
而且重要的是,如何让firefox移动设备第一次找到正确的位置？
非常感谢任何见解.
完整的CSS和HTML现在http://whoisnicoleharris.com
我已执行以下操作来重现该错误。
我进入连接页面，然后单击“写入”。定位确实不对。然后我禁用了 JavaScript 以依赖锚点。它工作正常。
我的解决方案是检测页面上的特定对象，以决定 JavaScript 滚动还是直接锚定。
if (document.getElementById('homepagebookmark')){
//do scroll
} else {
//leave it be
}
| 归档时间： |
|
| 查看次数： |
266 次 |
| 最近记录： |