做過前端開發(fā)的朋友都應(yīng)該知道，兼容性問題是讓我們特別頭暈的事情，很多時(shí)候我們需要話20%甚至更多的時(shí)間去解決我們寫出來的頁(yè)面的兼容性問題。而兼容性問題是存在各個(gè)方面的，表單的兼容性尤其讓很多人頭疼；普通的標(biāo)簽可能在適用html5的瀏覽器上可能兼容性問題已經(jīng)得到了很好的解決，而表單的兼容性依然讓人抓狂的。

很多搞前端的朋友都在想，如果世界上的瀏覽器都是同一種的同一個(gè)版本該多好啊，就可以解放更多的時(shí)間用于做更有意義的事情。當(dāng)然事實(shí)上，確實(shí)而隨著微軟放棄，很多項(xiàng)目已經(jīng)舍棄了IE6的支持，也有部分已經(jīng)舍棄了對(duì)IE7的支持，更有一些已經(jīng)舍棄了對(duì)IE8的支持。但有時(shí)候項(xiàng)目需求，我們必須解決一些問題，這是不可逃避的。

而實(shí)際上解決這類問題，我們完全可以采取虛虛實(shí)實(shí)的策略，這點(diǎn)對(duì)于處理表單的兼容性是特別有用的。比如表單的輸入框、單選框、復(fù)選框、下拉框，我們很多時(shí)候用替換的思想就可以避免表單標(biāo)簽的兼容性差的問題，而把容易出問題交給普通標(biāo)簽，而普通標(biāo)簽兼容性將更強(qiáng)。

下面以一個(gè)例子來說明，當(dāng)然這個(gè)例子中就算用完全的表單標(biāo)簽來做兼容性也算可以，只是提供一種思路；當(dāng)然實(shí)際上的項(xiàng)目當(dāng)中，我也會(huì)采取這種策略，因?yàn)槲疫€是比較喜歡那種常規(guī)的標(biāo)簽，也許這也是屬于一種強(qiáng)迫癥吧。

上面這個(gè)就是我們正在做的一個(gè)項(xiàng)目的一個(gè)小部分——一個(gè)普通的評(píng)論框，當(dāng)然這個(gè)沒什么技術(shù)難點(diǎn)。而實(shí)際上很多人，特別是剛?cè)腴T不就的開發(fā)者，總是固定的思維，把邊框加在了輸入框里邊。而實(shí)際上的結(jié)構(gòu)并不是這樣的，我們就是用一個(gè)普通的標(biāo)簽div來代替textarea應(yīng)該做的事情——如這里的邊框和內(nèi)邊距等。如圖就是它的基本層次結(jié)構(gòu)。

我們也可以分享給大家這個(gè)部分的html部分的源代碼，而CSS代碼就不貼出來的，如果貼出來很多人可能直接照搬過去，對(duì)與實(shí)踐沒任何意義。其實(shí)看了html的結(jié)構(gòu)基本上就知道CSS該怎么寫，當(dāng)然這個(gè)人得具備最起碼的項(xiàng)目實(shí)踐能力。

這個(gè)例子是一個(gè)特別簡(jiǎn)單，然而又是特別典型的；而這種虛虛實(shí)實(shí)的思維對(duì)我們處理前端的某些疑難雜癥是特別實(shí)用的。而且這些東西基本上不會(huì)有人分享，包括我在這里也僅僅是分享一個(gè)特別簡(jiǎn)單的例子，因?yàn)檫@樣的問題實(shí)在是不好表單，我們可以理解為是“只可意會(huì)不可言傳”吧，而標(biāo)準(zhǔn)的教材里面更是不會(huì)用有限的篇幅來寫這些東西的。而掌握這些技巧的方法，沒別的路徑，只有吸收別人的思維，然后去多實(shí)踐。