精华内容
下载资源
问答
  • 浏览器兼容

    2020-03-15 21:50:14
    浏览器兼容 为什么有浏览器兼容? 由于各大主流浏览器由不同的厂家开发,所用的核心架构和代码也很难重和,这就为各种莫名其妙的Bug(代码错误)提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒,都...

    浏览器兼容
    为什么有浏览器兼容?
    由于各大主流浏览器由不同的厂家开发,所用的核心架构和代码也很难重和,这就为各种莫名其妙的Bug(代码错误)提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒,都让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去克服的。

    NCSA Mosaic,或简称Mosaic,是互联网历史上第一个获普遍使用和能够显示图片的网页浏览器;
    
    	浏览器内核 ( 现代4大内核 )
    
    		Trident   代表作:IE
    		Gecko 代表作:Mozilla FireFox
    		WebKit : 苹果 & 谷歌旧版本
    		Blink : 代表作:谷歌 & 欧鹏
    		Presto   ( Opera前内核 已经废弃 )
    		
    CSS Bug、CSS Hack和Filter:
    
    		CSS Bug: CSS样式在各浏览器中解析不一致的情况,或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.
    		
    	    CSS Hack:  CSS中,Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法,因为它们都属于个人对CSS代码的非官方的修改,或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。
    	    		解决bug的方法;
    	    
    		Filter:表示过滤器的意思,它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲,Filter是一种用来过滤不同浏览器的Hack类型。
    				解决bug的的一种方法;
    
    			  1.下划线属性过滤器
    			 	 当在一个属性前面增加了一个下划线后,由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明,但是在IE6及更低版本浏览器中会继续解析这个规则。
    			  
    			  语法:选择符{_属性:属性值;}
    			 
    			
    			  2. !important关键字过滤器 (增加当前属性的权重,具有最高优先级)
    			  
    				  它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它,
    				我们可以利用IE6的这个Bug作为过滤器来兼容IE6和其它标准浏览器。
    				
    				  语法:选择符{属性:属性值 !important;}
    				 
    			
    			  3. *属性过滤器
    			
    				  当在一个属性前面增加了*后,该属性只能被IE7浏览器识别,其它浏览器混略该属
    				性的作用。
    				
    				 语法:选择符{*属性:属性值;}
    			
    			
    			  4.   \9  :IE版本识别;其它浏览器都不识别
    				语法:选择符{属性:属性值\9;}
    			
    			  5.   \0  :   IE8 及以上版本识别;其它浏览器都不识别
    			  	语法:选择符{属性:属性值\0;}
    
    展开全文
  • 小伙伴们你们知道手机360浏览器兼容模式怎么设置呢?今天小编很乐意与大家分享360浏览器设置兼容模式的方法,感兴趣的可以来了解了解哦。 手机360浏览器兼容模式怎么设置 360浏览器设置兼容模式的方法 手机360...

          小伙伴们你们知道手机360浏览器兼容模式怎么设置呢?今天小编很乐意与大家分享360浏览器设置兼容模式的方法,感兴趣的可以来了解了解哦。

          手机360浏览器兼容模式怎么设置 360浏览器设置兼容模式的方法

    d6737b15acf6c4203bbc5d0227b54f0c.png

          手机360浏览器是没有兼容模式的,兼容模式是指电脑上浏览器的一种模式,在电脑上设置360浏览器兼容模式方法如下:

          1、打开浏览器之后,点击地址栏右边的一个图标,如下图,会自动显示两种模式,分别为高速模式和兼容模式。

    6bb774d471a8b9eb8a9d3820e38713d0.png

          2、这个时候选择兼容模式即可,现在的浏览器就是兼容模式了。

          以上就是给大家分享的全部教程,更多精彩教程可以关注下载之家哦!

    展开全文
  • 如果遇到此类情况一般是浏览器兼容性设置问题。那么怎么进行兼容性视图设置呢?请参考下面操作(老手请无视此文)。a)IE浏览器设置1、打开浏览器兼容性视图设置2、将学籍管理系统网址添加到输入框,点击添加、关闭,...

    你们在使用全国学籍系统使用过程中,是否有遇到界面显示不全,相关审核信息没办法显示完全的情况呢?如果遇到此类情况一般是浏览器兼容性设置问题。那么怎么进行兼容性视图设置呢?请参考下面操作(老手请无视此文)。

    ce9f49a1112f30c86502538118ab785a.png

    a) IE浏览器设置

    1、打开浏览器兼容性视图设置

    a4961b7f7bc8e1116bcf784f50c874a6.png

    2、将学籍管理系统网址添加到输入框,点击添加、关闭,完成添加

    e8ec2b60e6ab121dcf910359582df5e2.png

    b) 360浏览器设置

    1、 点击网址输入框后面的闪电图标

    863b478c5857e6f1e9651159fabc73b7.png

    2、 选择IE兼容模式

    e0ef54597fc4884e6f9f9c0b2982a9c9.png

    3. “兼容模式”下,通过页面右键设定IE内核版本。当页面在“兼容模式”下,通过右键设定具体的IE内核版本,将兼容模式从“默认模式”修改为“IE8模式”

    8b6ad03541ac22b0295705e39d61009e.png

    最后,重启浏览器

    ec32e1e02558818236a003f6416b0b06.png

    注意:在退出学籍系统时,不要直接关闭网页窗口退出系统,这样学籍系统实际仍然在登录状态。所以当我们重新登录系统时,就会出现提示“该账号已登录,不能重复登录”,无法正常登录系统。我们在退出学籍管理系统应该点击学籍系统右下方的“注销”按钮退出系统。

    79964d24aa91edcc98c2e1cfe80c53c0.png

    中小学生学籍助手

    微信号 : IDHelper

    666e04ebace95a6ec3ef6d9a205be69a.png
    展开全文
  • 浏览器兼容性解决之道 前言 浏览器兼容性一直是前端开发中不得不面对的一个问题。而最突出的就是IE。对绝大多数公司来说,兼容IE6的性价比已经很低,而IE7则几乎已经绝迹。所以,常见的兼容性下限是IE8。这也正是...

    浏览器兼容性解决之道

    前言

          浏览器兼容性一直是前端开发中不得不面对的一个问题。而最突出的就是IE。对绝大多数公司来说,兼容IE6的性价比已经很低,而IE7则几乎已经绝迹。所以,常见的兼容性下限是IE8。这也正是Angular1.2x的兼容性目标,Angular团队声明:Angular的持续集成服务器会在IE8下运行所有的测试。但这些测试不会运行在IE7及以下版本,它们也不会保证Angular将会工作在这些IE版本上。

          而1.3以后的版本,Angular官方不再保证对IE8的兼容。当然,这并不表示一定不能在IE8用,但是官方不在针对IE8对集成测试,如果确实需要在兼容IE8的同时使用1.3,就需要自己做全面测试。不过,这样做的话性价比比较低。所以,在工程实践中,一般以IE8为分界,如果需要兼容,就用1.2,否则就用1.3+。

          在项目开发过程中,自己一直都是在Chrome浏览器中开发、调试服务端管理前台。后期测试阶段,Boss提出要做到主流浏览器(例如:360浏览器、qq浏览器、IE)兼容。这个要求还是很合理的。经过测试360、qq、UC、火狐等浏览器均不存在所谓的兼容性问题。最令人头大的就是IE。不过,我坚信:是问题就可以得到解决。

    测试环境:

    Angular版本 : angular-1.3.0.14

    Jquery版本  :jquery-1.9.1

    浏览器版本    : IE10

    解决

          初次尝试设置IE10的兼容性选项,无解。

          IE不兼容问题是程序中调用jquery,抢占了$的原因。解决方案如下:

    1.JQuery方案

    1.1 页面引入jquery.js库

    <script src="jquery-1.7.1.js" type="text/javascript"></script>

    1.2 添加两个js函数

    添加LockTableHead()和translate()函数。

    注意:为防止JQuery与现有js框架抢夺$标识符,要执行jQuery.noConflict()。

     

    function LockTableHead(divId, tableId) {
    var jq = jQuery.noConflict();
        jq("#" + divId).scroll(function () {
            var delta = jq("#" + divId).scrollTop();
            if (delta > 0) {
                translate(jq("#" + tableId +" th"), 0, delta - 2);
            }
            else {
                translate(jq("#" + tableId + " th"), 0, 0);
            }
        });
    }
    function translate(element, x, y) {
        var translation = "translate(" + x + "px," + y + "px)" 
        element.css({
            "transform": translation,
            "-ms-transform": translation,
            "-webkit-transform": translation,
            "-o-transform": translation,
            "-moz-transform": translation
        });
    }

     

    1.3 修改页面,调用js

    在适当的地方添加LockTableHead()函数调用即可。如下:

    <button οnclick="LockTableHead('grid','T000000');" name="b1" type="button">button</button>

    注意:要提供一个div的id和table的id 。

    2.非JQuery方案(纯js)

    2.1 思路

    受JQuery方案的启发,将它翻译回普通js即可。

    2.2 添加js函数

    添加LockTableHead()函数。

     

    function LockTableHead(divId, tableId) {
    document.getElementById(divId).onscroll = function () {
    var delta = document.getElementById(divId).scrollTop;
    var t1 = "translate(0px," + delta + "px)";
    th_Array=document.getElementById(tableId).getElementsByTagName("th");
    for (i = 0; i < th_Array.length; i++) {
    th_Array[i].style["-ms-transform"] = t1;
    }
    };
    }

     

    2.3 修改页面,调用js

    同上,在适当的地方添加LockTableHead()函数调用即可。如下:

    <button οnclick="LockTableHead('grid','T000000');" name="b1" type="button">button</button>

    注意:要提供一个div的id和table的id 。

    3.总结

          以上两方案实际上都是使用了css3中的translate函数,这就意味着浏览器得支持这个功能是前提条件。

          另外,如果页面上只有一个table,也可以通过getElementsByTagName的方式定位table,并用parentNode的方式定位div,这样就不必传递它们的id了。

          以上方法貌似只是解决浏览器局部兼容性问题。对于全面兼容不适用。

          IE浏览器兼容性问题真的难倒自己了。始终找不到一个好的解决方案。错误提示如下:

      

          

          居然有个对象是没定义的?!

     

        Object.keys方法是ES5中的函数。IE8不支持。

          自己根据提示修改了lodash.js文件中的L083,L229,将其进行了注释。并引入了es5-shim.js文件。

          是否需要考虑一下浏览器的内核?

    注:

          Google Chrome是采用Chrome内核,基于开源内核chromium。打开网页的速度快,且很安全,性能极佳,界面简洁,功能多,但兼容性有待提高。

          Internet Explorer是采用IE内核,打开网页的速度一般,安全性一般,但兼容性极高,界面简单,功能较少。

    暂时搁置....欢迎能够解决此问题的朋友留言。

    参考文献

    1.http://www.cnblogs.com/ahl5esoft/p/3872597.html

    2.http://blog.csdn.net/jumtre/article/details/50380311

    3.http://www.jb51.net/article/52583.htm

    4.http://www.jb51.net/article/45428.htm

    美文美图

     

    展开全文
  • 由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览器兼容。...
  • 浏览器兼容问题一直是一个难缠的问题,从你开始想成为一名程序员,到深入学习,从最开始什么都会懂,到开始写代码.从你研究页面到最后的面试. 你经常能听到这个2个问题? 1.你是如何处理浏览器兼容问题的. 2.什么是响应...
  • 正在学习前端,看到一个新词叫浏览器兼容性, 请问浏览器兼容性问题一般都有哪些呢? 通常怎么解决这些问题呢? xiexie~~
  • 最全整理浏览器兼容性问题与解决方案

    万次阅读 多人点赞 2018-02-26 11:44:36
    常见浏览器兼容性问题与解决方案 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站...
  • 由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览器兼容。...
  • 前端跨浏览器兼容

    2019-05-31 11:58:21
    1.兼容性查看网站2.api测试工具3.处理浏览器兼容问题的方法4.浏览器兼容的黑科技5.解决兼容性问题的方法6 Modenizr渐进增强.
  • Vue 浏览器兼容

    千次阅读 2018-12-19 10:31:41
    vue支持所有兼容ECMAScript5的浏览器,因IE8不支持ECMAScript5特性,故IE8及其以下浏览器均不支持vue。...因PC端存在浏览器兼容问题,应用较少。在不考虑IE8兼容性的情况下(譬如,内部使用系统),可以使用vue。 ...
  • 解决360浏览器兼容模式不兼容,极速模式兼容问题
  • 一、浏览器兼容模式浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中,做好浏览器兼容,才能够让网站在不同的...
  • 浏览器兼容性测试

    2018-07-01 01:45:52
    浏览器兼容性问题又被称为网页或者网站兼容性问题,指不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。产生浏览器兼容性问题的原因:不同的浏览器使用内核及所支持的HTML等网页语言标准不同,...
  • Web浏览器兼容测试

    2018-10-27 14:09:06
    Web浏览器兼容如何测试 如今, 市面上的浏览器种类越来越多,版本迭代频繁,同一web页面在不同浏览器上显示效果不尽相同,而用户对浏览器的选择也会有很大的差异。为了保证项目在这些浏览器上都能正常工作,针对不同...
  • Promise浏览器兼容问题

    千次阅读 2019-02-14 10:17:54
    文章目录Promise 在360浏览器兼容模式下无法运行 Promise 在360浏览器兼容模式下无法运行 解决方案 npm install babel-polyfill --save 修改 entry: { app: ['./node_modules/babel-polyfill/dist/polyfill.js','....
  • 浏览器兼容问题

    热门讨论 2015-08-16 12:58:06
    导读:这些天都在调一个系统的样式布局,之前没有想...浏览器兼容性问题:又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。 常见表现:网页元素混乱,错
  • 浏览器兼容性测试工具

    万次阅读 2018-05-28 20:42:04
    相关连接:【浏览器兼容性概述】 一、浏览器兼容性测试工具 1.0、IETester【免费·exe】 这是我最先用的测试浏览器兼容性的工具,想必也是大家用的最多的一个,IETester是一个免费的Web浏览器调试工具,可以模拟出...
  • 浏览器兼容解决方案

    千次阅读 2015-08-11 18:51:09
    WEB开发中,常常遇到浏览器兼容问题。我知道的应对之道,有这么几个,总结如下:1、css hack 针对不同的浏览器,书写不同的CSS。比如有些类、属性,只有某种浏览器才可以识别,那么写CSS的时候,也把它列上;有多少...
  • 前端多终端浏览器兼容

    千次阅读 2017-12-12 14:53:47
    因为各类设备的显示屏幕大小不一,分辨率不一,最佳可视效果的横竖设置也不一样,所以多终端浏览器兼容主要就是学习如何让我们的项目在多终端上呈现相同的显示效果,它主要涉及到两块知识点。 1、浏览器兼容 2、宽...
  • 我写的js 在360浏览器兼容模式下不显示,在极速模式下显示正常,所以我想强制360浏览器的用户浏览我的网站的时候只能使用极速模式而不能使用兼容模式,类似360浏览器主页那样的功能,要怎么实现。。
  • js浏览器窗口激活(各浏览器兼容

    千次阅读 2019-07-15 17:53:16
    js 浏览器窗口激活,各浏览器兼容 判断浏览器页面是否激活,对于大部分浏览器,使用document.hidden就可以了,但是对于360浏览器的兼容模式,只能监听到 浏览器最大化和最小化,监听不到 点击Tab //chrome,ff,360...
  • 浏览器兼容性整理

    2017-03-26 12:08:33
    写作目的:记录下这个笼统的浏览器兼容性问题。让自己更清晰一些。浏览器兼容性问题出现的原因就是浏览器内核不同所造成的,那么回顾一下常用浏览器的内核: Trident(只能应用于windows平台,不开源) IE浏览器 ...
  • 之前做项目的浏览器兼容,之前的浏览器嗅探全是一个一个方法判断,写的太乱太复杂了,后面用到了Browser.js,因为这个插件能测试到浏览器的内核,所以不管什么浏览器都可以测试出来。下面说下哪五大主流浏览器和四大...
  • 浏览器兼容,很多同学可能都知道IETEST 但是,真心不好用 今天发现了阿里偷偷上线了前端测试服务 1. 浏览器截图测试 2. 浏览器真机模拟测试 附上地址:http://fts.aliyun.com/index.htm
  • 前端常见浏览器兼容性问题解决方案

    千次阅读 多人点赞 2020-10-20 11:49:10
    所以浏览器兼容性问题一般指:css兼容、js兼容 浏览器 内核(渲染引擎) Chrome谷歌 之前Webkit,已改Blink内核 FireFox火狐 Gecko Safari苹果 Webkit IE Trident Opera欧朋 现已改用Google Chrome...
  • 常见浏览器兼容性问题与解决方案

    万次阅读 多人点赞 2014-07-08 11:15:32
    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的...
  • 浏览器兼容性问题适配,通过单独写css样式,适配各类浏览器兼容性,特别是针对IE8-9。 1-1.条件性注释(Conditional comments) [只有IE9及以前版本支持] 引入语法: 在css里使用如下标识符可以被ie识别而采用,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 67,882
精华内容 27,152
关键字:

浏览器兼容