為什麼 className 不要以 ad 開頭?
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。前端要對使用者互動時的方方面面進行考慮,這也是前端存在的價值所在。
與君共勉。
相關推薦
為什麼 className 不要以 ad 開頭?
A 公司新來的實習生小谷,發現頁面裡面一個 div 死活都顯示不了。 頁面的內容是 <div id="ad_holder">你好</div>,然後用 Chrome 開啟,怎麼也顯示不出來: 再經歷了幾輪排查後,小谷發現,關掉 Adblock Plus
JSON中key不要以'is'開頭
前幾天在專案開發中遇到一個很詭異的問題,後臺用Map封裝的物件傳送到前臺之後,發現有的屬性找不到了,而且還都是is打頭的屬性,如isFee。 後臺在網上查閱資料後知道,現在的瀏覽器會對JSON做一些過濾,會自動將isFee轉換成Fee屬性。
java web中路徑格式使用案例總結,即問題:要不要以“/”開頭?
首先可以確定相對路徑不需要以“/”開頭,在Java web裡用到的絕對路徑要以“/”開頭,因為“/”表示根目錄(即伺服器),然後“/”後面加上專案名/...... 接著要考慮的關鍵問題是,哪裡用相對路徑、相對誰?,哪裡用絕對路徑? 很難從個例當中總結出普適的規律,所以我把自從接觸Java w
Struts2 action中不要將方法以get開頭!!!
Struts2 action中不要將方法以get開頭 Struts2 action中不要將方法以get開頭 Struts2 action中不要將方法以get開頭 重要的事情說三遍! 今天除錯jquery傳送請求到action中我寫的三個方法回一次執行。審
ORACLE expdp導出/導入以XX開頭的所有表
oracle tables expdp 場景:有2個oracle用戶,userA默認表空間tablespaceA, userB默認表空間tablespaceB。 現在需要將userA中的系統表(該用戶表空間中以SYS開頭的表)導出到userB中,將userB的系統表覆蓋,但不覆蓋us
練習:編寫循環,讓用戶輸入內容,判斷輸入的內容以alex開頭的,則將該字符串加上_SB結尾
sed with 輸入 close lose highlight lex 字符串 用戶輸入 編寫循環,讓用戶輸入內容,判斷輸入的內容以alex開頭的,則將該字符串加上_SB結尾 while True: user = input(‘請輸入:‘)
springboot 1.5.x 使用tomcat8設置cookie的domain以dot開頭報錯
rri nat gem framework red char with div domain "C:\Program Files\Java\jdk1.7.0_75\bin\java" -XX:TieredStopAtLevel=1 -noverify -Dspring.
VUE中以v開頭的代碼和if判斷
註釋 bin log 變量名 不存在 返回 如果 雙向 簡單的 v-model="變量名" 雙向數據綁定一個變量,基本用在input裏獲取用戶輸入的內容v-bind:class="變量名"huo :class="變量名" 雙向數據綁定一個
C# 設置textedit只能輸入英文數字下劃線,並且只能以英文開頭(正則表達式)
tex spa edit 數字 a-z pan ext C# TE this.textEdit1.Properties.Mask.EditMask = @"[a-zA-z][a-zA-Z0-9_]*"; C# 設置textedit只能輸入英文數字下劃線,並且只能
網頁內容以&#開頭以;結尾的編碼(四)轉漢字--python
span 測試 utl -c .com -- p s 方法 uci 在抓取下來的網頁源碼顯示的是如下的內容,而不是可讀性的漢字 (當然,如果是在Web頁面上展示,則實體會自動被瀏覽器轉為原字符,正常顯示) 經查資料後得知, 在網頁中以四開頭的是HTML實體,具體什麽是HTM
微信連WIFI提示無法重定向到以weixin開頭的網址的解決辦法
tar gin tle color port out 定向 -s font 熱點登錄打不開改網頁,因為無法重定向一weixin://開頭的地址;ios無法通過portal頁面呼出微信客戶端;問題困擾了幾天;下面說解決辦法 地址見http://www.xiegaosheng.
Android 7.0以上系統獲取以content開頭的檔案拿不到正確路徑,報錯column-data-does-not-exist
我們專案的使用場景,手機qq開啟檔案,選擇其他開啟方式,選擇我們自己的應用開啟,通過intent.getData()獲取檔案地址,後來發現在Android7.0之後的版本,獲取到的地址不正確,說檔案不存在。日誌報錯column-data-does-not-exist, 經過一天的折騰,終於在網上
怎麼用正則表示式限制輸入框輸入數字的範圍(數字範圍是50-1000),怎麼限制輸入框輸入的數字是以9506開頭的
轉自 https://zhidao.baidu.com/question/1829801257322895700.html <input type="text" onkeyup="var v=this.value||'';v=v.replace(/[^\d]/g,'')
微信小程式報錯:id 屬性值格式錯誤。如不能以數字開頭。
出現這個報錯時,相信很多人都排除過自己標籤上寫的id是否有以數字命名的,如果你排除了發現並沒有,但是這個報錯還是存在,那麼我接下來分享的這個情況或者能報到你 這次我也遇到這個報錯,最終找出問題所在 這裡的scroll-into-view屬性是scroll-view元件中的,這裡涉及到錨點知
Java中判斷一句英文中有多少個以p開頭的單詞
package Pak01; public class TestString { public static void main(String[] args) { String s="peter piper picked a peck of pickled p
輸入一個字串,找出其中以“b”開頭的字母,空格分割字母
#include<stdio.h> //找出以“b”為開頭的字母 #include<string.h> int main() { char string[100]; int count=0; printf("請輸入字串
正則匹配以xx開頭以xx結尾的單詞(轉載)
在字串處理中,正則表示式是一大利器,但其對於初學者而言是存在一定的難度的。 而如何匹配以xx開頭以xx結尾的單詞呢? 假設需要匹配的字串為:site sea sue sweet see case sse ssee loses 需要匹配的為以s開頭以e 結尾的單詞。 正確
pandas讀取Excel檔案,以0開頭的資料,出現數據缺失
這裡以從深交所現在的日行情資料檔案為例,格式為xlsx 直接使用df = pd.read_excel(os.getcwd() + os.sep + 'stock.xlsx')讀取檔案時,證券程式碼被轉換為數字(000001 =>1),0被捨去,導致不正確。
規定密碼以字母開頭只能包含字母、數字和下劃線
轉自:http://www.softwhy.com/article-604-1.html 很多網站對於密碼的限制都有這麼一條,規定密碼只能夠以字母開頭,並且只能夠包含字母、數字和下劃線,並且還有一定的長度限制,下面就通過程式碼例項介紹一下如何使用正則表示式實現此限制。 程式碼例項如下: [J
java驗證,”支援6-20個字母、數字、下劃線或減號,以字母開頭“這個的正則表示式怎麼寫?
轉自:https://yq.aliyun.com/wenzhang/show_96854 問題描述 java驗證,”支援6-20個字母、數字、下劃線或減號,以字母開頭“這個的正則表示式怎麼寫? 驗證”支援6-20個字母、數字、下劃線或減號,以字母開頭“的正則表示式