【踩坑】近來在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...