Skip to content

Latest commit

 

History

History
76 lines (61 loc) · 2.11 KB

浏览器兼容性.md

File metadata and controls

76 lines (61 loc) · 2.11 KB
layout title
default
{"site.name" => nil}

浏览器兼容性

inline-block使用

    .disply-line-block{
	    display:inline-block;
	    *display:inline;
	    *zoom:1;
    }

一般的直接inline-blcok就可以了，但是ie6,7不行，不是不支持，而是支持的不好，所以先用display:inline先强制不换行。然后再zoom:1来触发元素的hasLayout，就可以设置宽高了。 而前面加上*是只让IE6,7来识别。

placeholder使用

注意placeholder是html5的新属性，只有一些比较新的浏览器才支持，所以ie6~9都是不支持的。想有效果，只能通过js来写hack，就是监听onfocus和onblur方法来控制显示和消失。

    //如果是ie6，7，8，9,就自主展示
    if(navigator.userAgent.indexOf("MSIE")>0&&(navigator.userAgent.indexOf("MSIE 7.0")>0||navigator.userAgent.indexOf("MSIE 8.0")>0||navigator.userAgent.indexOf("MSIE 9.0")>0)){                     
    }

placeholder的颜色修改

    //placeholder的颜色
    ::-webkit-input-placeholder { /* WebKit browsers */
        color:#ffb8a1;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color:#ffb8a1;
        opacity:  1;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color:#ffb8a1;
        opacity:  1;
    }
    :-ms-input-placeholder{color:red;}/*ie10*/

ie7下的js对象小bug

这句对象申明，ie7就会报错，不能有逗号：

    var x={
         a:11,
    };

location.origin这个东西ie是不支持的

还是使用location.hostname之类的吧

ie8的hack

css属性后面加上\9就可以写出hack ie6，7，8的代码了，但是，ie9也会支持

\0ie8支持，但是ie9也支持

想单独hack ie8，就加个新的选择器覆盖一下好了，比如:root。

chrome上input自带的上下的按钮

去除chrome自带的上下的按钮

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button{
        -webkit-appearance: none !important;
        margin: 0;
    }

input number