锚标签无法在IE或FF中运行

时间:2014-03-12 21:53:29

标签: jquery html internet-explorer firefox anchor

我的锚标签在IE或FF中无法正常工作。适用于Chrome。救命?!这是一个JSFiddle,它显示了我正在尝试完成的内容,并查看原始HTML的PasteBin

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

基本上,我有一个人的网格,每当盘旋时,会显示有关工作人员的信息。锚标签是朝向页面顶部的字母表的字母。单击时,它们应该转到以网格中该字母开头的第一个名称。这在Chrome中运行良好,但不会移动,而是移动到Firefox和IE的第一行。

此代码正在Sp​​iceworks用户门户中使用,因此HTML代码不存在。

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

提前致谢!

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

4 个答案:

答案 0 :(得分:3)

尝试做这样的锚:

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

此外,您的锚点上的转换效果非常简单。因此,当您单击顶部的字母时,它会平滑地向下滚动到图片。值得时间它的效果很好,并且不需要很长时间才能实现。 代码和教程是 - Here

你也可以View The Demo

答案 1 :(得分:1)

您的锚标记为空,因此某些浏览器会忽略它们。

你在哪里:

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

你应该尝试:

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

此外,更新的方法是使用id,而不是命名锚点。

请参阅updated fiddle,我更改了#Canchor。这适用于Firefox。

答案 2 :(得分:1)

我刚刚结束了图片元素本身(已经设置了ID)并且没有使用单独的标签。需要一点保养,但至少看起来是正确的。锚标记中的不间断空格在我的页面上创建了一些对齐问题。这是更新的JSFiddle,显示了我最终的结果。

感谢您的建议,大家。


而不是在图片网格中:

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

我在顶部的alpha标签中使用了这个:

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

(链接到下面的图片本身,而不是单独的标签)

答案 3 :(得分:0)

在某些浏览器中,您需要在锚标记中包含文本才能使其正常工作。如果您不想在名称锚点中添加任何内容,则可以使用不间断的空格:&nbsp;

所以这个:

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

成为这个:

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