1. 程式人生 > >[前臺]---input標籤中的hidden,瀏覽器差異問題

[前臺]---input標籤中的hidden,瀏覽器差異問題

前言:
這是一個比較簡單的問題,也有人犯過這樣的錯誤,如果你是一個人在編碼,並且沒有專門的去測試瀏覽器差異,這個或許會坑到你

問題描述:
用input標籤的時候,需要把這個input隱藏掉,於是先這樣做:

<input hidden id="xxx" value="xxx"/>

這行程式碼執行後,在谷歌瀏覽器完美的隱藏了這個input,但在360瀏覽器上卻展示出來了,並沒有隱藏.

修改後:

<input type="hidden" id="xxx" value="xxx"/>

問題很容易解決了,因為後面這種寫法是常規寫法,哪個老師教最開始也都是這種寫法

透過問題看本質:
首先,用第二種寫法type=”hidden”去隱藏一個input標籤,任何瀏覽器都是認這種寫法的,但由於各個瀏覽器的核心不同,導致第一種寫法,某些核心的瀏覽器就認不出來了

接下來簡單說說瀏覽器的核心(某度搜的,感覺寫的很好):
瀏覽器核心又可以分成兩部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它負責取得網頁的內容(HTML、XML、影象等等)、整理訊息(例如加入 CSS 等),以及計算網頁的顯示方式,然後會輸出至顯示器或印表機。瀏覽器的核心的不同對於網頁的語法解釋會有不同,所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網路內容的應用程式都需要核心。JS 引擎則是解析 Javascript 語言,執行 javascript 語言來實現網頁的動態效果。最開始渲染引擎和 JS 引擎並沒有區分的很明確,後來 JS 引擎越來越獨立,核心就傾向於只指渲染引擎。有一個網頁標準計劃小組製作了一個 ACID 來測試引擎的相容性和效能。核心的種類很多,如加上沒什麼人使用的非商業的免費核心,可能會有 10 多種,但是常見的瀏覽器核心可以分這四種:Trident、Gecko、Blink、Webkit。

眾多瀏覽器及其對應使用的核心:
1、IE瀏覽器核心:Trident核心,也是俗稱的IE核心;
2、Chrome瀏覽器核心:統稱為Chromium核心或Chrome核心,以前是Webkit核心,現在是Blink核心;
3、Firefox瀏覽器核心:Gecko核心,俗稱Firefox核心;
4、Safari瀏覽器核心:Webkit核心;
5、Opera瀏覽器核心:最初是自己的Presto核心,後來加入谷歌大軍,從Webkit又到了Blink核心;
6、360瀏覽器、獵豹瀏覽器核心:IE+Chrome雙核心;
7、搜狗、遨遊、QQ瀏覽器核心:Trident(相容模式)+Webkit(高速模式);
8、百度瀏覽器、世界之窗核心:IE核心;
9、2345瀏覽器核心:好像以前是IE核心,現在也是IE+Chrome雙核心了;
10、UC瀏覽器核心:這個眾口不一,UC說是他們自己研發的U3核心,但好像還是基於Webkit和Trident,還有說是基於火狐核心。