精华内容
下载资源
问答
  • bootstrap3 兼容IE8浏览器!IE8浏览器并不支持这一优秀的Css3特性,Bootstrap在开发文档中写了如何使用进行兼容IE8,感兴趣的朋友可以参考一下
  • 主要介绍了vue+iview 兼容IE11浏览器的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • bootstrap 兼容ie8浏览器

    千次阅读 2016-11-30 17:45:04
    bootstrap 兼容ie8 简单说明 完整代码 Demo下载 简单说明最近做项目碰到个问题,就是用bootstrap做后台框架的时候,发现IE9以下都不能完整的兼容。IE8表现为:界面兼容,bootstrap的动作不支持。 IE7更强大:全面不...

    bootstrap 兼容ie8

    • 简单说明
    • 完整代码
    • Demo下载

    简单说明

    最近做项目碰到个问题,就是用bootstrap做后台框架的时候,发现IE9以下都不能完整的兼容。

    IE8表现为:界面兼容,bootstrap的动作不支持。
    IE7更强大:全面不兼容
    

    在网上搜了下解决方案,总感觉是太过零碎,杂乱,自己跟着改了半天,兼容问题还是没解决。后来在一个开源框架里面看到了这套兼容代码,经测试有效后,直接提取了出来,并且做了一个Demo,做为记录。

    原代码展示


    文档类型声明:

    <!DOCTYPE html>

    meta引入:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    css以及js:

    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    说明:
    有看到网上说此处使用了CDN文件,会造成兼容失效。自己测试了下,未发现问题。<如果大家发现其它代码和demo一样,还是不兼容,可以找找这个原因>

    CDN引用(仅做示例,不用写入代码):
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    

    判断是否IE9及以下,引入兼容文件:

    <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <script src="js/respond.min.js"></script>
    <![endif]-->

    说明:
    代码如果和demo一样,还是不兼容,尝试将“html5shiv.js”文件改为“html5shiv.min.js”。(demo中已放入html5shiv.min.js,直接该代码即可)

    完整代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
        <!--必要-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <!--结束-->
        <meta name="tanxiang" content="bootstrap-ie-compatibility">
        <title>Bootstrap兼容IE8 Demo</title>
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <script src="js/jquery-1.11.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <script src="js/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="dropdown">
            <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="background-color: #31b0d5;display: block;height: 55px;color: #fff;line-height: 40px;border: 0px; width:120px;">
                <font style="font-size: 20px;">admin</font>
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">设置</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">退出</a></li>
            </ul>
        </div>
    </body>
    </html>

    效果说明

    Chrome下效果:
    这里写图片描述

    IE8下效果:
    这里写图片描述

    如果以上代码还是不行,请注意“清除浏览器缓存”再试试。

    Demo奉上

    http://download.csdn.net/detail/tx_3355/9698636 [点击前往下载]

    如有疏漏,欢迎指正。

    展开全文
  • 包含wangEditor2源代码 ,及代码说明,适用谷歌,火狐,ie8等浏览器
  • ie10浏览器解析不了es6的语法,需要我们使用babel(Babel是一种工具链,主要用于将ECMAScript 2015+代码转换为当前和旧版浏览器或环境中的向后兼容版本的JavaScript)。但是Babel 默认只转换新的 JavaScript 句法...

    1.

    问题:
         vue项目在ie11下一片空白并报Symbol 未定义的错

    原因:
         ie10浏览器解析不了es6的语法,需要我们使用babel(Babel是一种工具链,主要用于将ECMAScript 2015+代码转换为当前和旧版浏览器或环境中的向后兼容版本的JavaScript)。但是Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign)都不会转码。

    解决:
           1.在vue项目中安装babel-polyfill

           polyfill指的是“用于实现浏览器不支持原生功能的代码”,比如,现代浏览器应该支持fetch函数,对于不支持的浏览器,网页中引入对应fetch的polyfill后,polyfill就给全局的window对象上增加一个fetch函数,让这个网页中的JavaScript可以直接使用fetch函数了,就好像浏览器本来就支持fetch一样。    

    npm install --save-dev babel-polyfill
           2.在mian.js中引入babel-polyfill(要在引入vue,vuex,elementui 之前引入

    import 'babel-polyfill';
    重启项目,正常显示啦!
     

    注意: vue不持之ie8 以及之前的版本

    2。

    在做VUE项目中大家可能会发现除了IE内核浏览器之外项目都能正常显示,但是到IE就萎了,这主要是IE不支持ES6的原因。

    要解决这个我们要先引入browser.js,这样你可以使用ES2015(javascript下一代标准,具体可以看阮一峰的ECMAScript 6 入门)进行编码。

    1

    2

    <script src="/browser.min.js"></script>

    <script src="/files.js" type="text/babel"></script>

    引入之后在你的js文件加上type="text/babel",加上之后你会发现这个时候可以支持ES6的语法了。

    但是~你会发现又会报一个错误:Error in mounted hook: "ReferenceError: “Promise”未定义"

    这是因为之前使用的babel转换器只会转化新的句法,对一些API不转化。请查看http://babeljs.io/#polyfill 

    这个时候我们在项目前面再引入polyfill.js

    1

    <script src="/polyfill.min.js"></script>

    这样就可以解决了

     

    最后给大家browser.min.js和polyfill.min.js的源码

    browser.min.js源码:

    https://blog-static.cnblogs.com/files/gxsyj/browser.min.js

    polyfill.min.js源码:

    https://blog-static.cnblogs.com/files/gxsyj/polyfill.min.js

    原文地址:https://www.cnblogs.com/gxsyj/p/9944831.html

     

     

    展开全文
  • vue+iview 兼容IE11浏览器

    千次阅读 2018-10-27 10:55:44
    最近在搞一个基于vue的后台管理系统兼容IE浏览器,眼泪都要掉下来。后来和产品说了,同意兼容IE11,感动得我眼泪啊 这里也就是记录一下我遇到的超级烦的bug 首先是'babel-polyfill' 和"autoprefixer-loader" 这个...

    最近在搞一个基于vue的后台管理系统兼容IE浏览器,眼泪都要掉下来。后来和产品说了,同意兼容IE11,感动得我眼泪啊

    这里也就是记录一下我遇到的超级烦的bug

     首先是'babel-polyfill' 和 "autoprefixer-loader" 这个不用多说,资源一大堆

    webpack 有 webpack-dev 不支持IE低版本了,要把 webpack 版本往下调,我是拒绝的,

    然后 打包之后一直  const  去不掉,查了之后是 node_modules 里面有 const 和 let ,而编译的时候又 exclude node_modules 了,日了狗了。

    还好只要IE11

    1、IE  new Date() 失败

    new Date('2018-1-1')
    //Mon Jan 01 2018 00:00:00 GMT+0800 (中国标准时间)   chrome
    //Invalid Date                                      IE
    
    new Date('2018/1/1')
    //Mon Jan 01 2018 00:00:00 GMT+0800 (中国标准时间)   chrome
    //Mon Jan 01 2018 00:00:00 GMT+0800 (中国标准时间)   IE

    2、在IE里,点击 input type=checkbox 多次点击会逻辑混乱

    原因:在 IE中,多次点击之后会同时出发 dblclick 和 click 事件,而这两个事件是一起执行了 click 事件,会导致click 事件失效

    $("input[type='checkbox']").attr('ondblclick', 'this.click()');
    
    或
    
    $('.content').on('dblclick','input[type="checkbox"]',function(){
       this.click();   //  把双击事件变成单击事件 
    })
    注意,要判断是否是IE浏览器,要不然会把chrome 带进沟里

    3、input placeholder 会触发 input 事件

      意思就是说你渲染上去了,可能会自动触发一次 input,然后清空了文本,又触发一次

      重点是,IE tm 的不要脸地承认了!!说不影响安全,俺们就不修复了哈

      这东西的兼容就见仁见智了,用span 来代替 placeholder 也是可以的嘛,不多哔哔

    4、Input type=file 中,将 其置空清除 缓存会在IE中触发 change 事件,

    var fileName = $(this).val();
    filename == undefined

      这东西的兼容就见仁见智了,可以判断一下filename,不多哔哔

    5、input type=text 中,text-overflow: ellpsis失效

    input输入框如果东西太多,希望展示位   ...  省略号,但是chrome成功了,IE失败了

    需要将 input 标签置为 readonly 才能起作用
    
    没错,这东西是 iview select 里的 input标签
    So:
    initTheSelect () {
      var input = document.querySelector('.ellipsisInput .ivu-select-selection .ivu-select-input');
      input.setAttribute('readonly', true);
      input.addEventListener('click', function (params) {
        input.removeAttribute('readonly');
        input.focus()
      });
      input.addEventListener('blur', function (params) {
        input.setAttribute('readonly', true);
      })
    },

    6、在IE中,本系统是 使用了cookie 来保存验证信息的,但是没多久就能发现发送的请求都不携带cookie而导致重新登录

    查看了,是304 即读取缓存的时候,不会携带cookie,然后一旦读到一个  重新登录,你这个系统基本就完了,一直从缓存里读取,你登录了?诶,有缓存,我拿缓存吧。

    缓存:咳咳,你不是上次重新登陆吗?我给你存着呢,给给给,重新登录去吧。

    所以要么设置IE不缓存,要么代码改

     后端设置,前端的设置要么不保险(神tm时灵时不灵),要么就是太麻烦,后端几行代码搞定
    不允许浏览器端或缓存服务器缓存当前页面信息。
    response.setHeader( "Pragma", "no-cache" );   
    response.setDateHeader("Expires", 0);   
    response.addHeader( "Cache-Control", "no-cache" );//浏览器和缓存服务器都不应该缓存页面信息
    response.addHeader( "Cache-Control", "no-store" );//请求和响应的信息都不应该被存储在对方的磁盘系统中;    
    response.addHeader( "Cache-Control", "must-revalidate" );*//于客户机的每次请求,代理服务器必须想服务器验证缓存是否过时;
    

    2018-11-14

    僵持住了,还是我这边改吧

    axios.interceptors.request.use(
        config => {
             // 给每个请求加上一个 ieT 的时间参数
            if (window.navigator.userAgent.indexOf('Trident') > -1) {
                config.url = config.url + `?ieT=${new Date().getTime()}`
            }
            return config;
        },
        err => {
            return Promise.reject(err);
        });

    7、本系统使用了 tinymce 来进行富文本编辑,但是,初始化失败!!!而且不报错!!!

    这里使用tingmce只是导入了  tinymce一个文件,其他文件都放进了 dist 文件夹之中,然后让他自己去读取文件

    不知道为什么网上一点资源都没有,难道全世界就我一个人碰到了?可是这bug我去其他系统上必现的呀,老哥

    Tinymce.js

    这bug困扰了我整整两天!!一行一行在IE里面debug,对比chrome里的debug终于有结果了
    是tinymce在IE中的基本路径表现和chrome不一致,改源码
    Tinymce.js
    var load = function (name, addOnUrl, success, scope, failure) {
      if (urls[name]) {
      return;
    }
    var urlString = typeof addOnUrl === 'string' ? addOnUrl : addOnUrl.prefix + 
      addOnUrl.resource + addOnUrl.suffix;
      if (urlString.indexOf('/') !== 0 && urlString.indexOf('://') === -1) {
        // 兼容IE 浏览器
        // 在load函数中,需要判断 当前浏览器,然后加上 dist
        urlString = AddOnManager.baseURL + 'dist/' + urlString;
        console.log(urlString)
      }
      urls[name] = urlString.substring(0, urlString.lastIndexOf('/'));
        if (lookup[name]) {
           loadDependencies(name, addOnUrl, success, scope);
        } else {
          ScriptLoader.ScriptLoader.add(urlString, function () {
            return loadDependencies(name, addOnUrl, success, scope);
          }, scope, failure);
        }
    };
    
    
    var loadLanguage = function (scriptLoader, editor) {
      var settings = editor.settings;
      if (settings.language && settings.language !== 'en' && !settings.language_url) {
      // 兼容IE浏览器
        if (window.navigator.userAgent.indexOf('Trident') > 0) {
          settings.language_url = editor.editorManager.baseURL + '/dist/langs/' + 
          settings.language + '.js';
        } else {
          settings.language_url = editor.editorManager.baseURL + '/langs/' + 
          settings.language  + '.js';
        }
    
      }
      if (settings.language_url && !editor.editorManager.i18n.data[settings.language]) {
        scriptLoader.add(settings.language_url);
      }
    };

    Theme.js

    Theme.js
    var getSkinUrl = function (editor) {
      var settings = editor.settings;
      var skin = settings.skin;
      var skinUrl = settings.skin_url;
    
      if (skin !== false) {
        var skinName = skin ? skin : 'lightgray';
    
        if (skinUrl) {
          skinUrl = editor.documentBaseURI.toAbsolute(skinUrl);
        } else {
        // 兼容IE 浏览器
          if (window.navigator.userAgent.indexOf('Trident') > 0) {
            skinUrl = EditorManager.baseURL + '/dist/skins/' + skinName;
          } else {
             skinUrl = EditorManager.baseURL + '/skins/' + skinName;
          }
        }
      }
    
      return skinUrl;
    };

    8、导出excel文件

    其实我是倾向于使用 iview 自带的 exportCsv 的,但是 其

    不会执行 columns 里的render、

    导出的数字 0002 打开会变成 2

    。。。

    很多问题,没办法,这个文件天生的,避免不了

    IE 的话,又不兼容 download属性、我的系统又说什么阻止了正向与反向缓存什么的,点进去还蛮多符合的东西的,结果window.href 也gg,只能使用 msSaveBlob 了

    // 兼容IE
    if (window.navigator.msSaveOrOpenBlob) {
      const blob = new Blob([template], {type: "application/vnd.ms-excel"})
      navigator.msSaveBlob(blob, this.name.indexOf('xls') > 0 ? this.name : this.name + 
      '.xls');
    } else {
      let link = document.createElement('a');
      link.href = uri + this.base64(template);
      link.download = this.name.indexOf('xls') > 0 ? this.name : this.name + '.xls';
      link.click();
    }

    9、复制粘贴失效!?

    测试和我说复制粘贴失效了,我整个人差点爆炸!

    冷静一点...

    分析一下:在IE中,复制之后会将回车复制进去,然后黏贴到input标签时,只展示第一行

    //监听 paste事件
    MyPaste () {
      if (window.navigator.userAgent.indexOf('Trident') > 0) { 
    	var copyText = window.clipboardData.getData("Text");
    	this.filters.phoneNum = this.filters.phoneNum ? 
    	      this.filters.phoneNum + copyText.replace(/[\r\n]/g,"") :
    		  copyText.replace(/[\r\n]/g,"");
    	}
    },

    ...

    还有好多,但是就不一一讲了,其他的应该能查到,byebye

    展开全文
  • WEB前端一些兼容IE8 浏览器的写法

    千次阅读 2017-06-05 09:54:40
    整理的各种兼容IE8浏览器的一些小技巧

    兼容ie8 rgba()用法

    1.background: rgba(255,255,255,.1);设置透明颜色不支持ie8浏览器,需要使用filter来实现

    background: rgba(255,255,255,.1);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);

    第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下:
    这里写图片描述
    第二部分是19后面的六位 。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff;都是白色

    IE8浏览器不支持background-size:contain

    1.也可以使用filter模拟实现

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
                src='/res/images/sy_bgwl4_pc.jpg',
                sizingMethod='scale');

    src为你的图片真实路径

    IE8浏览器不支持scale缩放的

    1.可以使用ie特有的缩放属性zoom来代替

    后续有各种兼容的处理办法在陆续补充

    展开全文
  • 原因: ie10浏览器解析不了es6的语法,需要我们使用babel(Babel是一种工具链,主要用于将ECMAScript 2015+代码转换为当前和旧版浏览器或环境中的向后兼容版本的JavaScript)。但是Babel 默认只转换新的 JavaScript ...
  • 浏览器中设置一个div,假设最小宽度为1200px。在浏览器宽度大于1200px时为浏览器宽度,当浏览器宽度小于1200px时,出现水平滚动条,页面宽度为1200px;怎样在IE6下解决呢? div{ ... /*IE6兼容*/ }
  • ie6 ie5 ie4浏览器兼容ie7,程序员和设计师的测试必备工具
  • textarea 自适应大小 兼容Chrome ie浏览器,自动调整大小
  • bootstrap3 兼容IE8浏览器

    千次阅读 2016-01-22 14:01:38
    IE8浏览器并不支持这一优秀的Css3特性,Bootstrap在开发文档中写了如何使用进行兼容IE8,如果想兼容IE6,IE7,可以搜索bsie (bootstrap2) Bootstrap在IE8中肯定不如Chrome、Firefox、IE11那么完美,部分组件不保证...
  • h5和css3兼容IE8浏览器

    千次阅读 2017-01-03 11:28:48
    一、兼容html5标签 使用html5.js来兼容。  百度云盘下载:html5.js html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> meta ...
  • box-shadow兼容IE8浏览器写法

    万次阅读 2017-01-03 11:20:19
    -moz-box-shadow:3px 5px 5px #969696; -webkit-box-shadow:3px 5px 5px #969696; box-shadow:3px 5px 5px #969696;... 使用IE滤镜实现盒子阴影的盒子必须是行元素或以行元素显示(block或inline-block;)
  • 兼容 多版本浏览器 ie

    2016-03-31 17:42:38
    此客户端直接带有多版本的ie浏览器的型号是开发 测试的首选 包含不同版本的ie浏览器的客户端于一体 欢迎下载使用
  • ie6浏览器兼容集锦

    2011-09-18 10:32:52
    ie6问题总汇,让你轻松解决ie6浏览器兼容问题
  • 兼容真实IE8浏览器,模拟的不起作用
  • 一般情况下其他主流浏览器都问题不大,而IE浏览器不同版本也有差异,曾经就掉过坑,以为IE8测完一遍后,其他9,10,11问题应该不会很大,可以放心点,时间上评估少点,结果后来发现每个IE浏览器版本发现的bug都不一样...
  • module.exports = { presets: [ [' @vue/cli-plugin-babel/preset //文件原始内容 ', { useBuiltIns: 'entry' //添加的内容 }] ] }
  • IE6 浏览器常见兼容问题

    千次阅读 2017-11-13 14:49:41
    出处:网易博客-独行冰海:IE6 浏览器常见兼容问题 大汇总1.&lt;!DOCTYPE HTML&gt;文档类型的声明。产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象;解决办法:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 216,653
精华内容 86,661
关键字:

兼容ie10的浏览器