浏览器样式兼容总结

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;
    };

  

 

未完待续。。。

posted @ 2017-08-24 10:23  Tome.Wong  阅读(641)  评论(0编辑  收藏  举报