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


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

先是做m站,后來做了兩個app內嵌的hybrid項目,從來只考慮webkit前綴和相關的偽類。

最近四個多月開始做內部的管理系統,寫寫樣式,偶爾做個calendartree之類的組件,所有的基本只考慮新版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-xFirefox下面是**無效**的!!!

二)咦,為嘛還沒開始輸入文本框就驗證變紅了?

第二個問題。

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

然后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;
}

最后,還有些其他的

TO BE CONTINUED…


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com