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再点击一次出现提示；