Firefox、Chrome兼容性問題

Firefox

• 點擊元素出現邊框
  • 元素
    • input[type=button]
    • input[type=submit]
    • button

input[type=button]:focus,input[type=submit]:focus,button:focus {outline: none;}
button::-moz-focus-inner,input[type=button]::-moz-focus-inner { border: 0;} //使用Firefox的私有僞元素
//注意-moz-focus-inner並非reset outline，而是設置border
複製代碼

• select標籤

  • select標籤的color爲black， option爲white
  • Firefox option爲black，而谷歌下的option爲white

• input輸入框（樣式不一樣，不影響功能）

  • chrome 獲取焦點的時候會有藍色高border
  • 會閃一下（普通的）或無任何反應（readOnly）

• 空格（"&nbsp";）佔空間不一樣

  • 不使用"&nbsp";轉而使用"&ensp";(中文半個字符) "&emsp";（中文一個字符）

• 背景漸變

.classname{
    background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
}
複製代碼

• transform

div {
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
複製代碼

• animation

In Chrome animation-fill-mode backwards is wrong if steps(x, start) is used see example.
複製代碼

• 滾輪事件兼聽不到
  • 事件
    • mousewheel
  • 解決方案

$(elem).on("mousewheel DOMMouseScroll wheel", func);//DOMMouseScroll解決Firefox兼容問題；wheel解決IE兼容問題
複製代碼

• 顯示多行文本，超出顯示省略號

  • chrome

單行： overflow:hidden; text-overflow:ellipsis; white-space:nowrap
多行： overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
複製代碼

* 解決方案
複製代碼

div a:after {
        content: "...";
        position: absolute;
        right: 3px;
        top: 30px;
    }
複製代碼

• event

//Firefox行爲同Chrome
document.oncontextmenu=function(){
        console.log("event",event);//能夠直接使用
        console.log("window.event",window.event);//能夠直接使用
        console.log("e",e); //報錯
    }
複製代碼

• input[type="number"]

1.當輸入小數時，標紅提示
input[type="number"]{
    box-shadow: 0px 0px 0px 0px #fff; //使用box-shadow
}
2.不能限制只容許輸入數字
3.當輸入數字的時候，會有紅色框提醒有問題。
4.Firefox會自動去掉小數最後0
複製代碼

chrome

• 表單輸入框的背景色是米黃色
  • 谷歌的私有樣式(user-agent)形成的
  • 解決方案

input:webkit-autofill{
      -webkt-box-shadow:0 0 0px 1000px #FFF inset !important;
      color:#FFF!important;
}
複製代碼

• 密碼框自動填充

//瀏覽器會根據用戶已經保存過的密碼，在type爲password的input中自動填充密碼
//添加一個一樣的 input 做默認顯示，type 爲 text,這樣出來的時候就不會有默認填充了。正真的 input 密碼框則默認顯示 display：none,而且 readonly="true" 設置只讀模式。id 須要不一樣，須要 js 找到對應 dom 做操做。

<!--添加同樣的假input密碼框-->
<input id='passwordTxt' name="userPassword" type="text" class="checkpass required"/>
<!--真input密碼框-->
<input id='password' name="userPassword" type="password" class="checkpass required" style="display: none" readonly="true"/>

//js 操做
$(function() {
    //假密碼框得到焦點後，調用函數
        $("#passwordTxt").on('focus', function () {
        //假密碼框隱藏
            $(this).hide();
            //真密碼框顯示，而且去掉只讀，自動得到焦點
            $('#password').show().attr('readonly', false).focus();
        });
})；
複製代碼

• 輸入框自動填充

<input type="email" name="email" autocomplete="on" />
//chrome focus 出現提示；
//Firefox focus再點擊一次出現提示；
複製代碼