錨點在不同的瀏覽器上有不同的位置

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> 

你可以在任何地方找到的聯繫，因爲在視口中錨元素將不可見