Weebly editor - 发布链接到inpage#anchors - 仅限Chrome和IE

时间:2017-12-11 17:20:37

标签: html css google-chrome internet-explorer weebly

大家好,

我一直在通过Weebly编辑器在这个网站here上工作。 10年前我研究过Web开发,并且只是为了这项工作而重新开始使用它,因此使用了Weebly,希望能让我自己和雇主在一切运行良好时接管网站变得更容易。我一直遇到链接在Chrome和Edge中无法正常运行的问题,在Firefox和Safari中运行良好。我一直在寻找过去的3天,并尝试了很多事情但没有成功。

我构建的页面更像主菜单是一个页面,子菜单链接到该页面中的锚点。

通过Weebly的工作方式,我没有看到为您用于构建内容的任何“标题”或“文本”元素添加“id”属性的方法。所以我从最初的示例代码开始,插入需要的地方:

<a name="anchor-name"></a>

我只是将一个“嵌入HTML”元素放在我希望链接降落的位置,以补偿菜单始终位于顶部。这个简单的解决方案适用于Firefox和Safari。但出于某种原因,微软Edge并没有把我带到主播,只是停留在页面顶部;使用Chrome时,从外部来源打开链接,从电子邮件链接或右键单击以及“在新标签中打开链接”时,它无法正常工作,它比意图跳得更远,但一旦您在网站上就可以正常工作并浏览不同的子菜单。非常令人费解...

在我的研究中,我遇到了类似问题的人,从来没有真正相同。但我尝试了这种更优雅的方式,创建一个带有负顶部的CSS类来补偿菜单并将显示更改为“内联块”,有些人说它纠正了IE的问题。对我来说没有运气,Firefox仍然可以正常工作。

.nav-anchor{
  display: inline-block;
  position: relative;
  top: -150px;
  visibility: hidden;
}

我也遇到过某人说要检查W3.org验证器的错误,请参阅结果here。第一个错误是:

  

错误:X-UA兼容的HTTP标头必须具有值IE = edge,was   IE =边缘,铬= 1。

我无法弄清楚如何或在哪里改变它,我浏览了Weebly编辑器&gt;所有文件中的主题编辑器并没有在任何地方看到它。所以不确定我是否可以在某个地方添加它,或者Weebly是否只为您提供该部分。如果那是在解决我的问题的道路上的任何想法?

我没有花时间去处理所有错误,错误会导致链接无法正常执行吗?

答案here(谢谢Jeffrey Kastner)确实对Chrome浏览器提供了帮助,右键单击&gt;现在,子菜单链接上的“在新选项卡中打开”有时会将我带到正确的位置,有时会跳得太远。我用相同的链接一遍又一遍地尝试,似乎是随机的。我没有得到客户使用IE的反馈。

提前感谢您的任何帮助

(编辑:问候和感谢信由于某种原因在第一篇文章中消失了)

1 个答案:

答案 0 :(得分:0)

您的问题的简短答案是,您希望在各种类型的标题模板文件中添加meta标记与您网站主题中的标记。

在Weebly的网站上看到的大部分主题中使用了以下&#34; Header Type&#34;文件位于主题编辑器中,您需要将以下内容作为head标记的子项添加到每个文件中:

  • header.html
  • no-header.html
  • splash.html

(当然,根据您在网站上使用的主题,您的列表可能会有所不同。)

您需要将元标记 HTML代码作为子标记包含在head标记中:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

由于Chrome框架于2014年停产,因此chrome=1部分通常不再需要,但许多人仍然将其作为一部分包含在内。发生的事情是你指示Internet Explorer在&#34;标准&#34; (最新的渲染引擎)。 this stackoverflow question中更易于理解的详细信息中提供了此标记对此设置的完整答案。

我不确定这是否能完全解决您的链接未按预期运行的问题,因为有许多内容可以拦截或中断事件冒泡过程,例如:javascript,frameworks,CSS问题还有很多东西。如果您要提供一些更具体的信息和代码示例以及您所看到的错误,我可能会进一步提供帮助。

此外,您可能希望在Weebly Help Center and Knowledgebase中进行搜索,请考虑在Weebly Developer Community中提出此问题,或者通过创建Weebly Support Case来更加个人参与。