A 公司新來的實習生小谷，發現頁面裡面一個 div 死活都顯示不了。

頁面的內容是 <div id="ad_holder">你好</div>，然後用 Chrome 開啟，怎麼也顯示不出來：

再經歷了幾輪排查後，小谷發現，關掉 Adblock Plus 外掛後，元素就奇蹟般的重現了！如下圖：

這是為什麼呢？

其實是因為 Adblock、Adblock Plus 等瀏覽器外掛會自動遮蔽一些以 ad 開頭的標籤和檔案。你可以簡單理解為這些外掛在頁面中插入瞭如下的程式碼：

<style>
#ad_holder{
  display: none !important;
}
</style>
 

所以，小谷將 ad_holder 改名為 art_holder 之後，問題就解決啦。

總結

這個知識點其實只要知道有這麼一回事就可以了，然而我要說的其實是一個前端開發者的「觀察能力」，從細微之處發現規律。

作為一個前端，我時常問自己：

• 我對瀏覽器瞭解嗎？
• 我對使用者使用瀏覽器的習慣瞭解嗎？

前端，不只是 HTML / CSS / JS。前端要對使用者互動時的方方面面進行考慮，這也是前端存在的價值所在。

與君共勉。