【踩坑】近來在Firefox上遇到的一些坑，踩坑firefox遇到

【踩坑】近來在Firefox上遇到的一些坑，踩坑firefox遇到

因為工作一年多以來，做的工作基本都是和webkit系列打交道。

先是做m站，後來做了兩個app內嵌的hybrid項目，從來只考慮webkit首碼和相關的偽類。

最近四個多月開始做內部的管理系統，寫寫樣式，偶爾做個calendar、tree之類的組件，所有的基本只考慮新版Chrome。從來沒考慮別的問題。

最近在幫人解決firefox下的一些相容問題。QA妹紙提交了一堆“bug”。Bug列表讓人看了頭疼，還有點心虛。囧。

按部就班，先開啟控制台。一番研究，發現不少“bug”都是樣式的問題，並不是指令碼相容做得不好。

下面就細數下最近發現的一些bug，算是做個備忘。以後還是得注意啊。

一）還在用 background-position-x 嗎

以前看一些CSS規範，反覆強調不要使用background-position-x之類的屬性。

如百度FEX就指出：

 4.6 2D 位置
[強制] 必須同時給出水平和垂直方向的位置。
/* good */body {    background-position: center top; /* 50% 0% */}/* bad */body {    background-position: top; /* 50% 0% */}
一直以來恪守這個規則，但並沒有深究原因。

直到這次，真正遇到了問題。才在控制台上發現，原來background-position-x在Firefox下面是**無效**的！！！

二）咦，為嘛還沒開始輸入文字框就驗證變紅了？

第二個問題。

項目有個修改密碼的表單。驗證不通過的話，輸入框會加上紅色的邊框。

然後QA妹紙在描述中說的是：

firefox瀏覽器中，修改密碼頁面，輸入框中不輸入任何字元，輸入框顏色也是紅的

我還以為又是哪裡的js寫得不對呢。找了半天，還是決定從樣式入手。

Firefox的調試工具面板裡，似乎只列出了樣式表中的樣式。瀏覽器預設樣式的值，很難找到。我只能一點點實驗。

最後發現，input輸入框好像都帶了個required屬性。這是HTML5裡表示表單元素必填的屬性。莫非問題出在這裡？試著刪除了這個屬性，果然解決了。

其實，這紅色的邊框，並不是border，而是box-shadow啊。

最後得到解決方案是加上這段CSS：

input:required:invalid {    box-shadow: none;}

三）我擦，明明寫了 outline: 0可是然並卵啊

QA妹紙還反映，登入、註冊等視圖的各種按鈕，在Firefox怎麼點擊之後，會出現黑色的邊框啊？

啥？難道寫代碼的前端哥們兒不知道在:active、:focus等狀態下寫個outline:0啊？這不科學。

於是又開始了神奇的探(gu)索(ge)之旅。

這次得到的答案是，這黑色的細線還真不是outline。這是一個奇怪的偽類，::-moz-focus-inner。簡直哭死在鍵盤上。

於是，下面這段代碼解決問題：

button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"] > input[type="button"]::-moz-focus-inner {    border-color: transparent;}

最後，還有些其他的

• 還有什麼clipboardData粘貼的問題，見上一篇專欄【在網頁中擷取資料】Chrome和Firefox下的實戰經驗；

• 還有些東西，當時寫到注釋中了，忘了。。

TO BE CONTINUED…