页面导航适用于Firefox,但不适用于IE或Chrome

时间:2015-12-10 23:47:41

标签: html css google-chrome firefox internet-explorer-11

我目前正在修复一个必须在所有当前浏览器中运行的Drupal 7站点。我在页面导航中遇到问题。这些链接在Firefox中运行良好,但在Internet Explorer 11或Chrome中无效。

可以在http://www.tztesting.com

找到该网站的测试版本

网页上有一个网址无效的示例,位于主横幅图形上的“了解详情”链接中为http://www.tztesting.com/ourservices#servicesteps

在页面的下方是一个内容相当多的块。该块上方是以下

<div class="top_pad"><a name="servicesteps"></a>here</div>

类top_pad在css中定义如下

.top_pad {
    font-size:x-large;
    min-height:80px;
    text-indent:-9999px;
}

我已经尝试从目标中移除锚点并将其设为id,因为我相信名称的锚点已经过时且不再受支持。

我知道这种事情可以在JQuery或JavaScript中完成,但这不是一个选项,因为客户希望保持通过Drupal CMS编辑内容的能力,并且不可能让它们编辑模板。< / p>

如果有人能告诉我我的方式错误,我会很感激,所以我可以在IE和Chrome中使用页面链接获取这些错误

2 个答案:

答案 0 :(得分:0)

你所描述的应该可以正常工作。你是对的,你不应该使用名称作为片段锚点,但我怀疑任何浏览器都删除了该功能,因为它会打破旧网站。它当然仍适用于Chrome。

您的链接未按预期导航页面的原因是因为您有某种类型的点击事件处理程序会导致错误。因此,该问题似乎特定于您在此页面上运行的某些脚本,而不是片段锚点的工作方式。

答案 1 :(得分:0)

我深入研究了代码,发现问题不是你的错。具有名称的锚点仍然完全受支持,仅此一项就可以使用。然而,bootstrap和jQuery使用一个奇特的动画来滚动你到底部,而不是浏览器的默认行为,即跳转到那里。

问题是这个动画没有正确实现,并且因为jQuery,Bootstrap,Drupal或者(很可能)所有这些动画之间的通信中存在错误,所以会出现错误。每次单击站点上的任何锚链接时,都会使用控制台。

在firefox和Internet Explorer中发生这种情况的原因是因为在Drupal使用的特殊Boostrap版本中,有一个错误使得这种行为在firefox和Internet Explorer(以及可能的其他浏览器)中不起作用。这会导致浏览器只使用正常行为,没有错误,并且正常跳转。

我建议你把它带到Drupal并将其报告为bug。看到Drupal 7已经5岁了,他们很可能会告诉你只使用Drupal 8并停止抱怨。但是我可以给你一个修复bug的方法。将jquery的默认加载替换为一个链接,该链接加载包含此代码的本地版本的jquery:http://pastebin.com/VHc2RC3P

如果您不能或不想这样做,您可能会编写一些javascript代码来执行浏览器默认执行的操作,并覆盖库尝试执行的操作。