2014-03-12 53 views
0

我的锚定标签在IE或FF中无法正常工作。在Chrome中运行良好。帮帮我?!这是一个JSFiddle,它显示了我正在尝试完成的内容,并查看原始HTML的PasteBin锚定标签在IE或FF中不起作用

我不知道如何将JQuery导入JSFiddle,所以这就是为什么PasteBin链接在那里。

基本上,我有一个网格的人,每当它悬停时,显示关于该职员的信息。定位标记是朝向页面顶部的字母表中的字母。点击时,他们应该转到网格中以该字母开头的名字。这在Chrome中运行正常,但不会移动到Firefox和IE的第一行。

此代码正在Sp​​iceworks用户门户中使用,所以这就是HTML标签不存在的原因。

我基本上不知道为什么会发生这种情况,想知道是否有人可以通过我的方式传递一些知识。

在此先感谢!

<!--See links in description above.--> 
+0

JSFiddle上的左边栏名为** Frameworks&Extensions **有一个下拉菜单,允许您t o使用任何几个JQuery版本。默认情况下它被设置为'无库(纯JS)'。 –

+0

非常感谢你,@ Two-BitAlchemist。猜猜我可以绕过,发现我自己。唉,我在这里,懒惰。吃doritos。 –

回答

1

我刚刚落幕锚定到图片元素本身(已经设置了ID)并且不使用单独的标签。将采取一些保养,但至少看起来是正确的。锚标签中的非中断空格在我的页面上创建了一些对齐问题。这是更新后的JSFiddle,显示了我最终的结果。

感谢您的建议,每个人。

<a id="Aanchor">&nbsp;</a> 

我用这个去在alpha标签顶部:


在图片的网格

取而代之的是

<a href="#AdamC">A</a> 

(该链接到图片本身下方而不是一个单独的标签)

+1

我认为这对你已经拥有的东西来说非常明智。你知道你可以接受你自己的答案吗? –

3

尝试做你的锚是这样的:

<a id="tips">Useful Tips Section</a> 
<a href="#tips">Visit the Useful Tips Section</a> 

也有对你的锚过渡非常简单的效果。所以当你点击顶部的字母时,它会平滑地滚动到图片上。值得一提的是它的一个很好的效果,并且不需要很长时间来实现。 代码和教程 - Here

你也可以View The Demo

+1

查看我的帖子,了解我所走的路线。没有足够的代表给你一个+1 @ user2515563,但这jQuery的滚动是非常光滑的。易于实施! –

+2

自从他加倍努力之后,我会为你+1他,并向你展示如何做所有酷派小孩在面对此事时所做的事情。 :P –

1

你的锚标签是空的,所以一些浏览器都忽略它们。

如果您有:

<a name="Aanchor"></a> 

你应该尝试,而不是:

<a id="Aanchor">&nbsp;</a> 

此外,要做到这一点较新的方法是使用的ID,因为你还没有命名锚。

看到这个updated fiddle我改变了#Canchor。这适用于我在Firefox上。

0

在某些浏览器中,您需要在锚标记中有文本才能正常工作。如果你不想在名称锚任何事情,你可以使用非打破空间:&nbsp;

所以这个:

<a name="Aanchor"></a> 

变为这样:

<a name="Aanchor">&nbsp;</a>