锚点在不同的浏览器上有不同的位置

Question

我想创建一个链接直接转到另一个页面的某个部分。这是我正在做的。

1. 我创建使用name属性定位点：

   <a name="fish"></a> <p>some content....</p>

2. 我创建一个链接与＃添加到结束 “http://example.com#fish”

* **注意我也尝试了id方法，而不是名字，这仍然给我相同的问题。

例如：<div id="fish"></div>

的功能工作正常，它带我到页面上的特定部分，唯一的问题是，它看起来在不同的浏览器不同。 firefox显示的内容大约比chrome显示的高5英寸。

Answer 1

这可能是因为标签占用了一些空间。

最简单的解决方案，使用一个ID代替。

<p id="fish">some content....</p> 

确保有以下足够多的内容，因此它可以滚动

Answer 2

大多数浏览器都对普通的HTML元素相同的CSS默认值，但有可能是一些元素有空白和边距不同的属性值。

避免这些差异的一种方法是明确应用css语句中的值。

p {margin: 10px 0px} 

如果你不想这样做，我建议你把链接准确地放在文本所在的位置。

<p><a name="fish"></a>some content....</p> 

你可以在任何地方找到的联系，因为在视口中锚元素将不可见