国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

JaysonWang / 470人閱讀

摘要：最近在幫人解決下的一些兼容問題。驗證不通過的話，輸入框會加上紅色的邊框。然后妹紙在描述中說的是瀏覽器中，修改密碼頁面，輸入框中不輸入任何字符，輸入框顏色也是紅的我還以為又是哪里的寫得不對呢。最后發現，輸入框好像都帶了個屬性。

因為工作一年多以來，做的工作基本都是和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...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115095.html

相關文章

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

    摘要：最近在幫人解決下的一些兼容問題。驗證不通過的話，輸入框會加上紅色的邊框。然后妹紙在描述中說的是瀏覽器中，修改密碼頁面，輸入框中不輸入任何字符，輸入框顏色也是紅的我還以為又是哪里的寫得不對呢。最后發現，輸入框好像都帶了個屬性。 因為工作一年多以來，做的工作基本都是和webkit系列打交道。 先是做m站，后來做了兩個app內嵌的hybrid項目，從來只考慮webkit前綴和相關的偽類。 最...

    AJie 評論0 收藏0

  • Echarts輕松入門，內附踩坑秘籍

    摘要：中更是加入了更多豐富的交互功能以及更多的可視化效果，并且對移動端做了深度的優化。注內容摘自官網，原文地址 首先介紹一下我們的主角ECharts ECharts，一個純 Javascript 的圖表庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 **Canvas** 類庫 ZRen...

    YacaToy 評論0 收藏0

  • Echarts輕松入門，內附踩坑秘籍

    摘要：中更是加入了更多豐富的交互功能以及更多的可視化效果，并且對移動端做了深度的優化。注內容摘自官網，原文地址 首先介紹一下我們的主角ECharts ECharts，一個純 Javascript 的圖表庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 **Canvas** 類庫 ZRen...

    Tony 評論0 收藏0

  • Echarts輕松入門，內附踩坑秘籍

    摘要：中更是加入了更多豐富的交互功能以及更多的可視化效果，并且對移動端做了深度的優化。注內容摘自官網，原文地址 首先介紹一下我們的主角ECharts ECharts，一個純 Javascript 的圖表庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 **Canvas** 類庫 ZRen...

    tainzhi 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<