浏览器样式兼容总结

IE浏览器

IE9不支持HTML5 placeholder属性，找了很多种解决方法，比如通过模拟label，定位来实现，但这种解决方法也有问题，点击不消失，在GitHub上可以搜索到很多关于placeholder的库，但这些解决方案有的不兼容IE9，或者兼容但对input type为password处理的不太好。

后来找到了这个版本angular-shims-placeholder，问题解决了

 

去除IE浏览器默认下拉按钮

/*去除select默认选择样式*/
select{
  appearance: none;
  -moz-appearance: none; /* Firefox */
  -webkit-appearance:none; /* Safari 和 Chrome */
  border: solid 1px #99ccf2;
}
select::-ms-expand { display: none; }　　

 angular强制清除浏览器缓存

if (!$httpProvider.defaults.headers.get) {
   $httpProvider.defaults.headers.get = {};
}
$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.get['Pragma'] = 'no-cache';

 

IE10 浏览器 button点击，文字会出现下移，不知是什么原因，正在解决中。

这个是所有IE浏览器默认的样式，无法去掉，IE浏览器特有的视觉效果，如果必须想去掉，只能通过图片来去掉。（纠结好久，才解决。）

　　

Chrome37-38浏览器

输入框光标问题，解决方法去掉inline-height;

但是，这种又会影响到其他的浏览器垂直居中问题。Chrome在39上已经解决了这个bug。

 

360浏览器

今天遇到一个问题

媒体查询，在IE11上是正常的，但是在360 9.1版本没有用。找了很多，目前只有这种，但效果不是很有效：

/*IE 11*/
@media all and (-ms-high-contrast: none){
   *::-ms-backdrop, 标签选择器{样式}
}

/*IE 10*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  标签选择器{样式}
}

 

360浏览器，自动保存的登录用户信息，通过ng-model获取不到相应的值，但是输入框中有数据。

默认保存自填颜色无法去除，跟Chrome的不太一样。　　

 

360 9.1版本的浏览器针对自动保存的登录数据，使用angular ng-model无法获取，但是输入框是显示有值的。打印的显示的undefinded。

目前还无法解决。

避免360浏览器自动保存浏览器登录信息表单。

input增加autocomplete="off"，对360没有用，

<input type="text" id="password" onfocus="this.type='password'" /> ，360，密码直接以明文的方式显示

只有通过隐藏作用域的来避免浏览器提交表单

 

细节问题

前端经常会遇到返回上一个级，而不是，上一个操作的页面。

 

IE 10浏览器处理正则表达式

var arr = [{absoluteName: '//test1'},{absoluteName:'//test2'}];

arr.filter(function(m) { return m.absoluteName.replace(new RegExp(/\/\//gm) ,"/") });

IE浏览器会报　正则表达式处理错误

IE浏览器不支持

replace(new RegExp(/\/\//gm) ,"/")

针对IE浏览器可以换成

replace(/\/\//gm),"/")

IE 10,11不支持startsWith

  /**
  * 扩展startWith方法
  * @param str
  * @return
  */
  String.prototype.startsWith=function(str){
    if(str==null||str==""||this.length==0||str.length>this.length)
    return false;
    if(this.substr(0,str.length)==str)
    return true;
    else
    return false;
    return true;
    }; 
    
    /**
    * IE不支持indexOf方法，为IE添加indexOf的方法
    */
    Array.prototype.indexOf = function(val){
    var value = this;
    for(var i =0; i < value.length; i++){
    if(value[i] == val) return i;
    }
    return -1;
    };

　　

 

未完待续。。。