資訊專欄INFORMATION COLUMN
摘要：最近在幫人解決下的一些兼容問題。驗(yàn)證不通過的話，輸入框會(huì)加上紅色的邊框。然后妹紙?jiān)诿枋鲋姓f的是瀏覽器中，修改密碼頁(yè)面，輸入框中不輸入任何字符，輸入框顏色也是紅的我還以為又是哪里的寫得不對(duì)呢。最后發(fā)現(xiàn)，輸入框好像都帶了個(gè)屬性。
因?yàn)楣ぷ饕荒甓嘁詠恚龅墓ぷ骰径际呛?b>webkit系列打交道。
先是做m站，后來做了兩個(gè)app內(nèi)嵌的hybrid項(xiàng)目，從來只考慮webkit前綴和相關(guān)的偽類。
最近四個(gè)多月開始做內(nèi)部的管理系統(tǒng)，寫寫樣式，偶爾做個(gè)calendar、tree之類的組件，所有的基本只考慮新版Chrome。從來沒考慮別的問題。
最近在幫人解決firefox下的一些兼容問題。QA妹紙?zhí)峤涣艘欢?b>“bug”。Bug列表讓人看了頭疼，還有點(diǎn)心虛。囧。
按部就班，先打開控制臺(tái)。一番研究，發(fā)現(xiàn)不少“bug”都是樣式的問題，并不是腳本兼容做得不好。
下面就細(xì)數(shù)下最近發(fā)現(xiàn)的一些bug，算是做個(gè)備忘。以后還是得注意啊。
一）還在用 background-position-x 嗎以前看一些CSS規(guī)范，反復(fù)強(qiáng)調(diào)不要使用background-position-x之類的屬性。
如百度FEX就指出：
4.6 2D 位置
[強(qiáng)制] 必須同時(shí)給出水平和垂直方向的位置。
/* good */
body {
background-position: center top; /* 50% 0% */
}
/* bad */
body {
background-position: top; /* 50% 0% */
}
一直以來恪守這個(gè)規(guī)則，但并沒有深究原因。
直到這次，真正遇到了問題。才在控制臺(tái)上發(fā)現(xiàn)，原來background-position-x在Firefox下面是**無(wú)效**的！！！
二）咦，為嘛還沒開始輸入文本框就驗(yàn)證變紅了？第二個(gè)問題。
項(xiàng)目有個(gè)修改密碼的表單。驗(yàn)證不通過的話，輸入框會(huì)加上紅色的邊框。
然后QA妹紙?jiān)诿枋鲋姓f的是：
firefox瀏覽器中，修改密碼頁(yè)面，輸入框中不輸入任何字符，輸入框顏色也是紅的
我還以為又是哪里的js寫得不對(duì)呢。找了半天，還是決定從樣式入手。
Firefox的調(diào)試工具面板里，似乎只列出了樣式表中的樣式。瀏覽器默認(rèn)樣式的值，很難找到。我只能一點(diǎn)點(diǎn)試驗(yàn)。
最后發(fā)現(xiàn)，input輸入框好像都帶了個(gè)required屬性。這是HTML5里表示表單元素必填的屬性。莫非問題出在這里？試著刪除了這個(gè)屬性，果然解決了。
其實(shí)，這紅色的邊框，并不是border，而是box-shadow啊。
最后得到解決方案是加上這段CSS：
input:required:invalid {
box-shadow: none;
}
三）我擦，明明寫了 outline: 0 可是然并卵啊
QA妹紙還反映，登錄、注冊(cè)等視圖的各種按鈕，在Firefox怎么點(diǎn)擊之后，會(huì)出現(xiàn)黑色的邊框啊？
啥？難道寫代碼的前端哥們兒不知道在:active、:focus等狀態(tài)下寫個(gè)outline:0啊？這不科學(xué)。
于是又開始了神奇的探(gu)索(ge)之旅。
這次得到的答案是，這黑色的細(xì)線還真不是outline。這是一個(gè)奇怪的偽類，::-moz-focus-inner。簡(jiǎn)直哭死在鍵盤上。
于是，下面這段代碼解決問題：
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截圖粘貼的問題，見上一篇專欄【在網(wǎng)頁(yè)中獲取截圖數(shù)據(jù)】Chrome和Firefox下的實(shí)戰(zhàn)經(jīng)驗(yàn)；
還有些東西，當(dāng)時(shí)寫到注釋中了，忘了。。
TO BE CONTINUED...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/49767.html
摘要：最近在幫人解決下的一些兼容問題。驗(yàn)證不通過的話，輸入框會(huì)加上紅色的邊框。然后妹紙?jiān)诿枋鲋姓f的是瀏覽器中，修改密碼頁(yè)面，輸入框中不輸入任何字符，輸入框顏色也是紅的我還以為又是哪里的寫得不對(duì)呢。最后發(fā)現(xiàn)，輸入框好像都帶了個(gè)屬性。 因?yàn)楣ぷ饕荒甓嘁詠恚龅墓ぷ骰径际呛蛍ebkit系列打交道。 先是做m站，后來做了兩個(gè)app內(nèi)嵌的hybrid項(xiàng)目，從來只考慮webkit前綴和相關(guān)的偽類。 最...
摘要：中更是加入了更多豐富的交互功能以及更多的可視化效果，并且對(duì)移動(dòng)端做了深度的優(yōu)化。注內(nèi)容摘自官網(wǎng)，原文地址 首先介紹一下我們的主角ECharts ECharts，一個(gè)純 Javascript 的圖表庫(kù)，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴輕量級(jí)的 **Canvas** 類庫(kù) ZRen...
摘要：中更是加入了更多豐富的交互功能以及更多的可視化效果，并且對(duì)移動(dòng)端做了深度的優(yōu)化。注內(nèi)容摘自官網(wǎng)，原文地址 首先介紹一下我們的主角ECharts ECharts，一個(gè)純 Javascript 的圖表庫(kù)，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴輕量級(jí)的 **Canvas** 類庫(kù) ZRen...
摘要：中更是加入了更多豐富的交互功能以及更多的可視化效果，并且對(duì)移動(dòng)端做了深度的優(yōu)化。注內(nèi)容摘自官網(wǎng)，原文地址 首先介紹一下我們的主角ECharts ECharts，一個(gè)純 Javascript 的圖表庫(kù)，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴輕量級(jí)的 **Canvas** 類庫(kù) ZRen...
閱讀 3387·2021-11-22 15:22
閱讀 2371·2021-09-06 15:00
閱讀 871·2020-06-22 14:39
閱讀 3704·2019-08-30 15:56
閱讀 1540·2019-08-30 12:55
閱讀 3260·2019-08-29 17:19
閱讀 3231·2019-08-26 11:41
閱讀 613·2019-08-23 17:14
