锚点失效问题。

最新推荐文章于 2022-11-24 15:09:32 发布

转载最新推荐文章于 2022-11-24 15:09:32 发布 · 1.0k 阅读

文章标签：

#markdown #javascript #ViewUI

本文探讨了HTML中使用锚点链接进行在线订购时，在IE6内核和360浏览器中遇到的问题。通过分析发现，当a标签内包含文字时，360浏览器能正确跳转到指定锚点；为了解决这个问题，可以使用CSS设置a标签的display属性为block，或添加特定样式触发hasLayout，确保链接在不同浏览器中都能正常工作。

<a href="#order" title="在线订购">在线订购</a>

<a name="order" id="order"></a>

html中，关于锚点，这样加锚点一般没什么问题的，兼容各个浏览器。

但是最近发现在ie6内核，360浏览器下居然失效，

查了一下原因

<a name="order" id="order">任意文字</a>

a标签里面有内容的话，360浏览器就正常了。。

或者这个这个a标签添加样式，触发hasLayout就正常了：

.anchor { display:block; height:0; }


<a name="order" id="order" class="anchor"></a>

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33935777

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

ie,360下html锚点失效问题解决

09-25

ie,360下html锚点失效，想必有不少朋友遇到过这样的问题吧，下面为大家讲解下具体的解决方法，感兴趣的朋友可以参考下哈

html 锚点无效,html5中使用锚点失效，each 遍历的时候停留在第一个（序号为0）...

weixin_32563347的博客

06-04

681

单页导航* {padding: 0;margin: 0;}a {text-decoration: none;color: #000;}.menu {width: 1050px;height: 40px;line-height: 40px;position: fixed;background-color: #ccc;left: 50%;margin-left: -525px;z-index: 100...

参与评论您还未登录，请先登录后发表或查看评论

vue项目中锚点定位bug无效和替代方式

iQXQZX

06-12

2021

在vue项目中，使用锚点定位会和router的规则冲突，在项目中的表现就是第一次点击url改变了，但是没有跳转到锚点位置，再次点击才会跳转。所以在vue项目中定义一个方法不适用锚点定位： scrollToSection(id) { let section = document.getElementById(id) if (section) { section.scrollIntoView() } } html标签中绑定click事件就可以了 ..... ...

vue-router和锚点冲突问题

aasa0304的博客

08-12

455

传统的锚点定位会与vue-router中的路由设置存在冲突，都是使用'#'进行的，所以这里使用一直方法来模拟锚点跳转，并使用tween.js达到动态的过度效果不使用原生锚点，使用这种方式解决 import '../static/js/animation.js' import '../static/js/tween.js' <a href="javascript:;" @cl...

前端用a标签做锚点跳转失效

qq_45758147的博客

11-24

1486

前端a标签锚点失效

用jquery修复在iframe下的页面锚点失效问题

10-25

因此，解决锚点失效问题时，需要确保父页面和iframe页面在同一个域下，或者使用服务器端的代理来绕过同源策略的限制。通过上述方法，我们可以利用jQuery来修复在iframe下页面锚点失效的问题，使得用户在点击链接时...

用jquery进行修复在iframe下的页面锚点失效问题

09-28

以下是如何利用jQuery修复`iframe`下锚点失效问题的步骤： 1. **判断是否在`iframe`中**：首先，我们需要通过JavaScript检查当前页面是否处于`iframe`中。这通常可以通过比较`window`对象与`window.top`对象是否...

JS如何实现在页面上快速定位（锚点跳转问题）

10-19

JS实现页面快速定位的技术主要...5. 解决特定浏览器锚点失效问题：通过检测URL中的锚点并在页面加载完毕后执行相应的滚动操作。掌握这些知识点有助于开发者在实际开发中更好地利用JS技术提升页面交互性和用户体验。

由锚点失效引发的hasLayout探究

freshlover的专栏

04-19

7400

前端html小技巧—如何解决iframe页面锚点失效

yunduanaoligei的博客

01-27

1368

今天分享下”前端html小技巧—如何解决iframe页面锚点失效“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。应用场景如下：iframe页面上没有滚动条。如果父窗中出现滚动条，锚点标记将失效，因为锚点将根据当前窗口滚动条滚动窗口。成为子窗后，没有滚动条，自然不会滚动。解决办法是:用js用j判断页面是否嵌套s计算iframe在父窗体位置，锚点在firame在中间位置，两者结合成父窗滚动。遇到问题:获取父窗体元素

vue 实现锚点功能操作

10-14

主要介绍了vue 实现锚点功能操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

html 锚点无效,单击使用htmlunit的javascript锚点似乎不起作用

weixin_30476025的博客

06-04

568

我正在使用htmlunit自动浏览网站.这是问题所在：我想点击一个锚点,以显示给定表格的新页面.这是锚点：7这是我的代码：final HtmlAnchor a = page2.getAnchorByText("7");HtmlPage page3 = a.click();System.out.println(page2.getWebResponse().getContentAsString())S...

解决vue路由与锚点冲突

weixin_38371427的博客

12-03

436

HTML <ul> <li><a href="" @click.prevent="custormAnchor('firstAnchor')">公共报文头</a></li> </ul> <div id='firstAnchor'>test</div> js methods: { custormAnchor(anchorName) { // 找到锚点

Vue 路由哈希模式下的锚点定位支持

凝弧

05-12

4972

路由 hash 模式已经将#占用, 页面的锚点功能失效，js 实现替代 <a @click="$tools.goAnchor(0)">定位到顶部</a> <a @click="$tools.goAnchor('#link1')">定位到锚点1</a> <a @click="$tools.goAnchor('#link2')">定位到锚点2</a> <a @click="$tools.goAnchor('#link3')"

html5 中錨点写法,html5中锚点的使用失去效果（用id代替以前的name），each遍历的时候，停留在第一个（序号为0），求帮助...

weixin_32532029的博客

06-05

150

html>单页导航*{padding:0;margin:0;}a{text-decoration:none;color:#000;}.menu{width:1050px;height:40px;line-height:40px;position:fixed;background-color:#ccc;left:50%;margin-left:-525px;z-in...

css - 解决绝对定位和弹性布局同时出现时弹性布局flex失效的问题

qq_43886365的博客

09-07

4888

解决绝对定位和弹性布局同时出现时弹性布局flex失效问题

vue + element 实现锚点链接

weixin_38673922的博客

07-22

2652

一、代码块 <el-row id="userManagement"> <h1 @click="jump('userManagement')">用户管理</h1> <el-col :span="24">为了正常使用知产魔方，您需要在用户管理模块中，为代理所内部用户、外部用户开通知产魔方使用权限。</el-col> </el-row> export default { methods:{

锚点失效的问题

北极光的博客

09-10

3626

用phpcms改了个站，突然发现锚点不好用了，不知道是哪的问题，以为我少复制了什么东西呢，可是那也不至于让锚点不起作用了呀，试了多次，终于知道问题所在了，很无语的一个原因，就是在锚点的前后必须要有内容，也是就是不能是单行只写一句，虽然不知道是为什么，但是这样解决了，晕！！！

解决锚点在IE8中失效

05-13

在IE8中，锚点（即页面中的链接）可能会失效。这是因为IE8中存在一些bug，会导致页面滚动不正确。为了解决这个问题，可以尝试以下方法： 1. 使用JavaScript来模拟锚点的跳转。可以使用以下代码： ``` function scrollToAnchor(anchorName){ if(document.getElementById(anchorName)){ var anchorElement = document.getElementById(anchorName); var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; var elementOffsetTop = anchorElement.getBoundingClientRect().top + scrollTop; window.scrollTo(0, elementOffsetTop); } } ``` 这段代码会根据传入的锚点名称，找到对应的元素，并将页面滚动到该元素的位置。 2. 在页面中添加一个空的`<a>`标签，并将其的`href`属性设置为锚点名称。这样可以让IE8将其识别为锚点，并正确地跳转到对应位置。 ``` <a name="anchorName"></a> <a href="#anchorName">Go to anchor</a> ``` 以上两种方法都可以解决IE8中锚点失效的问题。