精华内容
下载资源
问答
  • IE浏览器兼容性设置

    千次阅读 2019-04-23 22:27:18
    亲爱的猿,是不是还在被IE浏览器弄得焦头烂额?本博文将罗列几种方式,完美解决IE兼容性难题,希望能帮到给位同仁。 首先声明,本博文属于原创,如需转载,请标明链接,坚决谢绝剽窃。如有发现,本人将投诉,写作...

    1 首篇

    亲爱的猿,是不是还在被IE浏览器弄得焦头烂额?本博文将罗列几种方式,完美解决IE兼容性难题,希望能帮到给位同仁。

    首先声明,本博文属于原创,如需转载,请标明链接,坚决谢绝剽窃。如有发现,本人将投诉,写作不易,谢谢支持!

    2 HTML meta标签设置页面渲染方式

    2.1 html meta标签信息详细介绍,链接大神url地址

    https://www.cnblogs.com/En-summerGarden/p/7771813.html

    2.2 meta标签设置,选择浏览器内核渲染方式

    <head>
        <meta charset="utf-8">
        <!-- 指定IE和Chrome使用最新版本渲染当前页面 -->
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> 
        <!-- 兼容ie指定版本 -->
        <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"> //兼容ie9
        <!-- 360浏览器极速模式和标准模式 -->
        <meta name=”renderer” content=”ie-comp”> 
        <!-- 默认IE标准模式 -->
        <meta name=”renderer” content=”ie-stand”>
        <!-- 选择浏览器内核进行页面解析和渲染 -->
        <meta name="renderer" content="webkit|ie-stand|ie-comp" />             
    </head>

    meta标签解决兼容问题,核心方式是选择浏览器的内核来渲染html页面,不同内核的浏览器对页面的渲染也是不尽相同,如果对浏览器运行机制和渲染机制感兴趣的猿们,可以参考下面链接

    https://kb.cnblogs.com/page/129756/

    https://segmentfault.com/a/1190000009975744

    不同的浏览器页面渲染引擎,参考维基百科

    https://en.wikipedia.org/wiki/Comparison_of_browser_engines

    3 JS 方式处理浏览器兼容(本博文重点介绍)

    3.1 不同浏览器的JS解析引擎

    我们最常用的Chrome浏览器,V8引擎解析js,不同浏览器解析引擎不尽相同,所以会有所差异,有关浏览器JS解析引擎,参考维基百科

    https://en.wikipedia.org/wiki/JavaScript_engine

    3.2 通过 polyfill.js解决兼容性问题(本博文重点介绍)

    polyfill.js一定在项目初始化时候引入,优先级最高

    3.2.1 polyfill概念参考链接

    通俗介绍就是,如果浏览器js引擎没有一些模块或者方法,那么可以通过polyfill.js(代码块或者插件),将缺少的模块或者方法添加进去

    https://remysharp.com/2010/10/08/what-is-a-polyfill

    https://javascript.info/polyfills

    3.2.2 通过代码实例说明解决方式(IE和Chrome)

    引入polyfill.min.js

    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>

    OR ES6

    //浏览器兼容性设置
    import './src/ol/plugins/polyfill/polyfill.min.js?features=requestAnimationFrame,Element.prototype, CharacterData.prototype, DocumentType.prototype,URL,Object.assign';

    polyfill.min.js代码

    /* Disable minification (remove `.min` from URL path) for more info */
    
    (function(undefined) {}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});

    features后面的参数代表浏览器缺少的模块或者方法,将其绑定在window对象之下

    (1)requestAnimationFrame

    (2)Element.prototype

    (3)CharacterData.prototype

    (4)DocumentType.prototype

    (5)URL

    (6)Object.assign

    IE浏览器缺少remove()方法,解决实例

    /* Disable minification (remove `.min` from URL path) for more info */
    
    (function(arr) {
        const elementNodes = [Element.prototype, CharacterData.prototype, DocumentType.prototype];
    /*     if (window.NodeList && !NodeList.prototype.forEach) {
            NodeList.prototype.forEach = Array.prototype.forEach;
        } */
    
        elementNodes.forEach(function(item) {
            if (item.hasOwnProperty('remove')) {
                return;
            }
            Object.defineProperty(item, 'remove', {
                configurable: true,
                enumerable: true,
                writable: true,
                value: function remove() {
                    this.parentNode.removeChild(this);
                }
            });
        });
    }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});

    参考链接

    https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

    IE浏览器缺少Node​List​.prototype​.for​Each()方法,解决实例

    /* Disable minification (remove `.min` from URL path) for more info */
    
    (function(arr) {
        // const elementNodes = [Element.prototype, CharacterData.prototype, DocumentType.prototype];
        if (window.NodeList && !NodeList.prototype.forEach) {
            NodeList.prototype.forEach = Array.prototype.forEach;
        }
    
    }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});

    IE浏览器缺少Object.assign()方法,解决实例

    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Object.assign"></script>

    正如polyfill的概念,如果浏览器缺少模块或者方法,我们便可以为其添加,使得浏览器能流畅地运行

    4.结束语

    关于浏览器的兼容性,本博文主要通过html meta标签设置和polyfill.js方式分享大家,还有其他方式解决,希望同仁们可以在评论区留言,我会及时补充,希望能帮到大家,非常感谢你们的支持。最后附上本博文的主要信息参考Web MDN链接

    https://developer.mozilla.org/en-US/docs/Web/API

     

     

     

    展开全文
  • IE浏览器兼容性后续 前言 继续尝试解决IE浏览器兼容性问题,结局方案为更换jquery、angularjs、IE的版本。 1.首先尝试更换jquery版本为1.7.2 jquery-1.9.1.js-->jquery-1.7.2.js--> jquery2.1.4.js 无效 2.尝试...

    IE浏览器兼容性后续

    前言

          继续尝试解决IE浏览器兼容性问题,结局方案为更换jquery、angularjs、IE的版本。

          1.首先尝试更换jquery版本为1.7.2

          jquery-1.9.1.js --> jquery-1.7.2.js -->  jquery2.1.4.js 无效

          2.尝试更换IE版本IE8

          IE11 --> IE8(本机系统不支持) --> IE10

          angular-1.3.0.14 -->angular-1.2.0

     

        相关代码如下:

    <div class="container">

    <div class="row">

        <div class="col-md-2">

            <div ui-view="sys_banner">

             导航栏加载中...

            </div>

        </div>

        <div class="col-md-10" style="padding-left50px">

            <div ui-view="rightContent">

             内容信息加载中...

            </div>

        </div>

    </div>

    </div>

          由此可见,兼容性问题导致的原因大致为angular版本不兼容导致的。相关视图没有加载上。

          搞了一上午,没有任何进展,放弃了。

    注1:IE浏览器与360安全浏览器的区别

          IE浏览器是Windows操作系统自带的浏览器,360安全浏览器的是IE的加强版。

          360安全浏览器为双内核,除了IE内核,还有谷歌内核,不同内核效率不一样,非IE内核的更快更安全。

          在360浏览器地址栏右侧,点击可以切换模式。

          极速模式为谷歌内核,兼容模式为IE内核。

          对于某些页面,在IE中显示正常,在360极速模式下显示不正常的页面,点击切换到兼容模式即可显示。

          切换到兼容模式化,对切换的这个网站设置在本机上是记录下来的,也就是在兼容模式关闭后,下次打开这个网站,还是保留兼容模式。

    注2:jQuery 2.0版本主要变化 

          不再支持IE 6/7/8,如果在IE9/10版本中使用“兼容性视图”模式也将会受到影响。

          更加轻量,2.0版本文件与1.9.1相比小了12%。

          模块化,你可以自定义构建一个更小、更轻量的版本。

         兼容jQuery 1.9版本的API。

    参考文献

    1.http://www.daqianduan.com/3696.html

    2.http://www.jb51.net/article/68162.htm

    美文美图

     

    展开全文
  • 设置IE文档模式解决IE浏览器兼容性

    千次阅读 2018-06-20 14:17:39
    IE兼容性一直是前端开发者最头疼的问题之一,很多时候为了解决莫名其妙的兼容性脑细胞那叫一个大片大片的死亡啊,经常是Chrome、Firefox等浏览器正常,但偏偏IE要出现问题,有些时候可能高版本的IE也正常,但有...

    IE的兼容性一直是前端开发者最头疼的问题之一,很多时候为了解决莫名其妙的兼容性脑细胞那叫一个大片大片的死亡啊,经常是Chrome、Firefox等浏览器正常,但偏偏IE要出现问题,有些时候可能高版本的IE也正常,但有一些问题却是用最新版本的比如IE11访问了,但还是各种莫名其妙的问题,比如:


    上面这个问题,其实在Chrome上是丁点儿毛病都没有的,看错误信息的话像是jquery.js引用被放在bootstrap.min.js后面了,但检查代码后发现并不是,最后调试发现,切换IE的文档模式后是正常的。

    新版本的IE默认的文档模式是7,切换到10、11后发现是正常的,所以可以通过代码中直接指定文档模式解决类似的兼容问题,代码如下:

    1、直接在HTML文件的head标签中添加

    <meta http-equiv="X-UA-Compatible" content="IE=edge" >

    2、通过js设置

    var head = document.head || document.getElementsByTagName('head')[0];
    var meta = document.createElement('meta');
    meta.http-equiv = "X-UA-Compatible";
    meta.content = "IE-edge";
    head.appendChild(meta);

    最后保存代码,刷新浏览器,发现显示正常了

    展开全文
  • 主要介绍了JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案,需要的朋友可以参考下
  • 当你引入一个增设的兼容性模式,此文章说明文件兼容性的必要性,列出现有版本IE能使用的文件兼容性模式并示范如何选择特定的兼容性模式。 了解文件兼容性的必要性 每个主要版本IE新增的功能都是为了让浏览器更容易...
  • win8系统怎么提高IE浏览器兼容性.docx
  • IE浏览器兼容性处理与提示

    千次阅读 2017-08-09 15:28:20
    IE浏览器兼容性提示这里只给大家介绍简单的提示方式:js弹框提示或者HTML页面的文字提示: html代码 1 : &lt;!--[if lte IE 8]&gt; &lt;style type=&quot;text/css&quot;&gt; .items-...

    也可以用来判断浏览器版本,以便于选择性加载css或者js文件

    这里只给大家介绍简单的提示方式:

    js弹框提示或者HTML页面的文字提示:


    html代码 1 :

    <!--[if lte IE 8]>
    
        <style type="text/css">
             .items-btn{display:none;}
        </style>
        <script type="text/javascript">alert("您的浏览器版本较低,请升级版本以获得更好的体验!");></script>
    
    <![endif]-->
    

    或者你也可以在页面中显示下面文字内容作为提示:

    html代码 2 :

    <!--[if lte IE 8]>
          
          <p style="color:red;">您的浏览器版本较低,请升级版本以获得更好的体验!</p>
          
    <![endif]-->
    

    **注意:**有时候也可以用来判断浏览器版本,以便于选择性加载css或者js文件。

    html代码 3 :

    <!--[if lte IE 8]>
    
          <link rel="stylesheet" href="style.css"/>
          <script src="js/demo.js"></script>
    
    <![endif]-->
    

    以上内容仅供参考,具体根据自己的需求问题对应选择或改进。


    以上就是关于“IE浏览器兼容性处理与提示”的全部内容。

    展开全文
  • IeTester--可设置各个IE浏览器的各个版本,对于开发人员进行Ie浏览器版本兼容性测试时非常有帮助
  • 网上一大堆extjs关于设置textfield不可编辑的分享,却没有提到 Ext.getCmp('paramId'+i).getEl().dom.disabled =false在IE浏览器里不兼容问题,为了这个问题折腾2个小时,现在分享下,直接用 Ext.getCmp('paramId'...
  • 如何在win8电脑中关闭IE浏览器兼容性视图设置?.docx
  • html ie浏览器兼容性问题

    千次阅读 2018-09-29 15:38:21
      解决方法: 添加 &lt;meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1"&gt; 即可
  • IE兼容性视图设置在哪 兼容性视图怎么设置在浏览器右上角的设置设置设置方法如下: 方法1首先,打开电脑,找到电脑桌面上的IE浏览器,并点击打开,打开后,进入任一网页,找到页面右上方的...
  • Vue CLI 3 IE浏览器兼容性配置依赖包兼容新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右...
  • Edge,IE浏览器 兼容模式设置

    万次阅读 2018-12-15 17:40:40
    1.前两天帮别人查教师资格证分数,发现只能用内核为IE的浏览器且是兼容模式才可以进入该网站,下面是用谷歌...3.打开“使用Internet Explorer打开”后,会出现一个兼容性设置窗口,在里面加入你访问网站即可,如下图...
  • 写了一个js,在ie8可以运行,在ie10不可以,在谷歌浏览器可以完美运行,
  • 做的项目,在ie打开的时候,有几个方法并不兼容。如下。 1. Object.assign() -- 合并对象。用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 Object.assign() 在ie时并不兼容,如下...
  • 用Vuejs写的ajax在IE不能渲染页面,求大神帮助解决在IE下的问题
  • IE打开默认模式居然是IE7,我勒个擦,由于客户都属于‘老年人’范畴,所以必须满足IE兼容性见下图 ![图片说明](https://img-ask.csdn.net/upload/201710/16/1508137022_404953.png) 调用的接口如下 ...
  • Firefox与IE浏览器的javascript兼容性问题Firefox与IE浏览器的javascript兼容性问题Firefox与IE浏览器的javascript兼容性问题Firefox与IE浏览器的javascript兼容性问题Firefox与IE浏览器的javascript兼容性问题Fire...
  • IE浏览器 兼容性(IE9-11 差异说明)

    千次阅读 2017-08-30 16:35:56
    IE浏览器自从IE9开始后,做了很大的改动,更符合了W3C标准(World Wide Web Consortium),这也是为啥IE8比其他问题要更多的原因了。其中IE11已更完善,像IE11中就内置了IE7-IE10的浏览器模式(按F12打开开发者...
  • 问题起因: ...JSON是包含在JScript 5.8引擎中,而为了向下兼容ie8只有在文档模式是”Internet Explorer 8 Standards”的时候才使用JScripte 5.8,其他时候使用JScripte 5.7特性。因此如果文档模...
  • IE浏览器兼容模式设置

    千次阅读 2014-08-08 15:45:01
    而某些网站却仍采用原有标准,为了兼容IE8 IE9中变出现了兼容浏览模式,英文为Compatibility View Mode。《这个周末要仔细的把这几种模式学习一下》  其实据我目前的理解,设置兼容模式就是设置浏览器对网页的...
  • easyUI各版本与ie浏览器兼容问题
  • 文件兼容性用于定义让IE如何编译你的网页。此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式。 前言 为了帮助确保你的网页在所有未来的IE版本都有一致的外观,IE...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 47,410
精华内容 18,964
关键字:

怎么设置ie浏览器兼容性