精华内容
下载资源
问答
  • 前端兼容性问题
    2021-07-01 17:21:32

    一直以来,Web前端领域最大的问题就是兼容性问题

    前端兼容性问题分三类:

    浏览器兼容性
    屏幕分辨率兼容性
    跨平台兼容性

    浏览器兼容性问题

    IE6、7、8不支持HTML5、CSS3、SVG标准,可被判定为“极难兼容”

    IE9不支持Flex、Web Socket、WebGL,可被判定为“较难兼容”

    IE10部分支持Flex(-ms-flexbox)、Web Socket,可被判定为“较易兼容”

    IE11部分支持Flex、WebGL,可被判定为“较易兼容”

    IE6、7、8、9可视为“老式浏览器”

    IE10、11可视为“准现代浏览器”

    Chrome、Firefox、Safari、Opera 、Edge可视为“现代浏览器”

    屏幕分辨率兼容性问题

    在不同的屏幕分辨率,浏览器页面展示差异很大。特别是屏幕分辨率较小时,容易发生布局错乱。为了解决这个问题,响应式UI框架应运而生
    现在新的UI框架基本都支持响应式
    element ui ,ivew ,antd 等。。。。。

    浏览器兼容策略

    国内XP用户还有3.29%,XP用户既升级不了IE9,也无法安装新版本Chrome和Firefox 。而IE用户还有 5.65%,考虑到Windows用户为87%,所以IE9+的份额应该要少于5.65%-3.29%*87%=2.79%。也就是说IE8以下的用户要多于IE8以上的用户。所以支持单独支持IE9+ 浏览器没有实际意义,要么支持IE6,要么不支持IE,。

    看看知名网站对IE8的兼容性,

    京东会提示“温馨提示:您当前的浏览器版本过低,存在安全风险,建议升级浏览器”,但是页面完全可以正确显示,几乎没有什么异常发生,看来兼容工作很到位。
    淘宝会出现很多页面异常,说明IE兼容工作要求不高,基本正常即可,只是象征性的加了几条兼容性内容。
    去哪儿网也会出现很多页面异常,但页面布局还是正常的,看来也是尽力而为,不做要求。
    腾讯的页面只有一个立即更新按钮,一贯地友好。
    知乎直接404,好吧,强大。

    兼容IE的建议:

    一、建议不做任何兼容,IE6~11直接显示升级浏览器按钮。

    二、如果一定要兼容,后端返回IE专用页面,至少兼容IE8。

    屏幕分辨率兼容策略

    屏幕分辨率最少要考虑兼容便携屏幕和移动屏幕两种。可以参考去哪儿网的做法,把内容分成三类:移动端主菜单与导航栏;主要内容;扩展内容。屏幕分辨率高于480,显示主要内容、扩展内容。屏幕分辨率低于480,显示移动端主菜单与导航栏、主要内容。
    如果你的应用是管理软件,则最好考虑兼容桌面屏幕、便携屏幕和移动屏幕三种。Bootstrap5新增了超超大屏幕,则就是基于这种考虑。这时候,可以加入侧边栏自动隐藏/打开,主要内容用Flex方式组织,可以在页面中并排显示多页(类似于Word的页面视图)。

    跨平台兼容策略

    大型网站,手机网站与桌面网站是不同的入口,因此不存在兼容,是两个单独的应用程序。对于流量较小的网站,平台的兼容策略主要是应用响应式框架,加上移动端主菜单与导航栏即可,其次可以选用跨平台框架来实现在不同平台的差异化体验。没有这些框架对于Web网站来说不造成大的体验下降。而如果需要开发混合移动、桌面应用,则需要认真考虑这些框架,毕竟用户对本地应用的体验期待要高很多。

    更多相关内容
  •   前端会出现兼容性问题,主要是因为前端代码的运行环境不同,前端代码的运行环境是游览器,你不能说你写的前端代码,在谷歌能运行,在IE游览器就无法正常显示;也不能IE游览器能运行,谷歌无法正常显示。前端代码...

    为什么会有兼容性问题。

      前端会出现兼容性问题,主要是因为前端代码的运行环境不同。
      前端代码的运行环境是浏览器,前端写出来的代码,开发阶段在谷歌上进行测试能正常运行,在IE浏览器可能样式、功能就无法达到预期的效果;通过如果开发阶段在IE上进行测试运行,那很可能在其他浏览器上会存在大小不一的问题。
      什么是兼容性?兼容性就是前端的代码所有浏览器都能正常解释执行并渲染出符合自己预期的页面

    这里的兼容性指的是前端的兼容性,这里的前端代码指css、js这些代码,html不需要兼容,每个浏览器都是统一的,所以不需要兼容,大家处理方式都一样。

      后端根本就不存在兼容性问题,因为他的运行环境都只有一种。java就是JVM,python就是python解释器,不需要python也能在JVM上运行(不需要也没必要)。
      每一个浏览器的开发团队都不同,他们对前端都有自己的团队理解,都尽量将自己的浏览器做的有特性,被更多人使用。这就导致,虽然都是浏览器,但是不同的浏览器对CSS、JS的解释执行是不同的。比如我们要阻止事件冒泡,IE得这么写event.cancelBubble=true,放到谷歌,谷歌不认识,还可能会报错,因为谷歌用event.stopPropagation()阻止冒泡。同样谷歌的event.stopPropagation()放到IE,IE也不认识。为了兼容IE和谷歌,我们得像下面这么写。

    // 只有IE浏览器认识,火狐、谷歌不认识
    event.cancelBubble=true
    // 谷歌、火狐都认识,IE不认识。
    event.stopPropagation()
    
    // 兼容IE、火狐、谷歌写法
    // 如果存在event.stopPropagation,则执行event.stopPropagation()
    if(event.stopPropagation){
     event.stopPropagation();            
    }else{
    	// 否则为执行IE浏览器组织冒泡行为的代码
        event.cancaleBubble==true;          
    }
    

      本来各大浏览器开发团队都遵循W3C的规范,就完全不存在兼容性问题。但是为了突出自己浏览器的个性,开发团队也会偏离规范进行开发,导致兼容性问题。这就是为什么早期jQuery那么火的原因之一,他底层的实现都加了一层兼容性处理,这样开发人员使用jQuery就不用考虑兼容性问题了,代码写起来就没有这么多if else分支处理。

    再来说为什么开发人员都喜欢谷歌浏览器,摒弃IE浏览器。

      随着时间推移,各大浏览器开发团队发现各自搞自己的一套不行,要遵循W3C标准进行开发。随着版本的更迭,高版本的浏览器写法逐渐趋同。早期的低版本的火狐和谷歌在获取事件对象时也要采取兼容性写法。高版本火狐和谷歌就不需要兼容了,可以直接使用事件对象event。欸,这样是不是随着版本更新,大家遵循W3C标准进行开发,是不是不用解决兼容性了?

    // 低版本火狐获取事件对象,必须传入一个事件对象参数,并且参数名不能随便取
    // 而谷歌可以直接使用事件对象event。一下是兼容写法
    function eventHandle(e){
    	var event = e || window.event;
    }
    

      别忘了,还有个IE浏览器。其实IE浏览器也进行着版本的迭代,也朝着W3C标准进行开发。为什么还要兼容IE呢?
      主要还是火狐和谷歌,版本更新之后,他之前的版本会在很短的时间内被新版本给取代,大家都用着高版本的火狐和谷歌。但是IE呢?他是跟随系统的,跟系统适配的,你现在装一台window XP系统,它自带的IE浏览器还是IE7(XP系统IE版本在6-8之间)。这使的情况变为更为复杂,IE6-8的写法不同,IE9的写法不同,火狐和谷歌的写法还可能不同。还不能不管window的IE,因为window使用人群基数非常大,而且用户根本就会重装系统,升级windows来升级IE浏览器。
      所以开发人员都喜欢用遵循W3C的谷歌,摒弃开发时兼容性处理非常麻烦的IE,简直恨不得IE从世界上消失。
      但是大家也不要慌,从jQuery出现以来,兼容性问题就交给开发框架、开发库的那些人去解决了,我们拿过来使用就可以了。而且随着时间推移,window不再对XP、window7维护更新。低版本IE也最终会被淘汰,现在一些框架、库都已声明不再支持IE6-8。目前兼容性问题依然存在,随着大家都遵循W3C标准进行开发,兼容性问题会慢慢减少。
      所以一个开发标准显得尤为的重要。

    最后再来说一下,万一遇到兼容性要自己处理时怎么办?

      其实看前面的代码就可以知道了,主要有两种。
      1、if else判断,既然每个浏览器有不同的属性方法,我们就判断这个存不存在就好了。

    // 存在证明是火狐、谷歌
    if(event.stopPropagation){
     event.stopPropagation();            
    }else{
    	// 否则为执行IE浏览器组织冒泡行为的代码
        event.cancaleBubble==true;          
    }
    

      2、 || 或取值,如果存在e这个对象,说明这个浏览器是火狐。如果不存在,那么就是IE和谷歌,因为e不存在,event就会取||后面的event作为事件对象。

    var event = e || window.event;
    

      本质都是判断对象存在与否,只是写法不同。

    展开全文
  • 前端兼容性问题解决方案

    千次阅读 2018-07-14 18:37:34
    (1)CSS浏览器的兼容问题,比如设置元素透明度,不同浏览器的实现方式如下: ...    解决方案:现在的前端开发已经出现了非常多的框架和类库用于浏览器的兼容问题,比如最常见的jQuery类库...

    (1)CSS浏览器的兼容问题,比如设置元素透明度,不同浏览器的实现方式如下:

    //IE浏览器使用滤镜实现
    filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50)
    //非IE浏览器
    opacity:0.5

        解决方案:现在的前端开发已经出现了非常多的框架和类库用于浏览器的兼容问题,比如最常见的jQuery类库,解决获取元素中包含的所有文本内容兼容性问题,可以使用以下语法:

    $('#element').text('element text');

    (2)CSS书写样式的兼容性问题
        平常在书写样式表时,若要使用CSS 3中的各种特效,都需要加上各种前缀让不同的浏览器得以支持,如实现一个圆角效果代码如下

    boder-radius:3px;           /*圆角,水平半径为3px*/
    -moz-border-radius:3-x;     /*Firefox浏览器*/
    -webkit-boder-radius:3px;   /*WebKit核心浏览器*/
    -o-border-radius:3px;       /*Opera浏览器*/

        解决方案:推荐一个非常流行的解决方案,使用Less CSS Framework解决书写样式的兼容性问题,以下描述摘自官网:

    LESS将CSS赋予了动态语言的特性,如变量、继承、运算、函数。LESS既可以在客户端上运行(支持IE6+,Webkit,Firefork),也可以借助Node.js或者Rhino在服务器端运行。

    (3)检测浏览器是否支持CSS3和HTML5
        常见的安全检测手段有4种,如下:

    • 检查全局对象,如window、navigator是否拥有指定属性,如离线存储、地理位置信息等HTML 5新特性
    • 通过创建新元素,检查元素对象上是否拥有指定的HTML 5属性,如Canvas等
    • 通过创建新元素,检查元素对象上是否拥有指定的HTML 5方法,同时调用该方法,并判断返回值,如检查video元素支持的视频格式
    • 通过创建新元素,设置元素对象上的HTML5指定属性值,并判断设定后的值是否被保留。

        可见,检测HTML 5特性需要熟知各种情况,这并非是一件简单的事。可通过第三方库检测HMTL5,如最热门的Modernizr库。
        Modernizr是一个用JavaScript编写的开源类库,用于检测浏览器是否支持CSS 3和HTML 5的新功能。Modernizer库比传统的通过浏览器的UserAgent获取浏览器版本信息判断特性支持的方法更可靠,检测结束后将判断结果存储在Modernizr对象上,使用者可以通过获取Modernizr对象上的信息判断浏览器对CSS 3或者HTML 5的支持情况
        使用Modernizr类库可以前往官网下载,地址为https://modernizr.com或者http://modernizr.cn/.进入development下载页面,可以发现Modernizr提供了各类属性检查的选择项,使得开发者可以按照自身的需求下载应用包的最小集。

    (4)CSS 3浏览器前缀问题
        浏览器厂商会预先支持还处在草案状态下的CSS属性,为了做区分所以在样式名前加上各自的前缀。目前常用的前缀有-webkit、-moz、-ms、-o。假如在项目中想使用最新的CSS 3属性,又不想写那么多前缀,可以使用一个JavaScripte的姐解决方案,该项目地址为https://github.com/LeaVerou/prefixfree

    展开全文
  • 所以浏览器的兼容性问题前端开发人员经常会碰到和必须要解决的问题。 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会...
  • 前端项目开发中兼容性问题

    前端项目开发中兼容性问题

    1、图片加 a 标签在 IE9 中会有边框

    解决方案:img{border:none;}

    2、rgba 不支持 IE8

    解决方案:可以用 opacity

    eg:opacity:0.7;/*FF chrome safari opera*/
    filter:alpha(opacity:70);/*用了 ie 滤镜,可以兼容 ie*/
    

    但是,需要注意的是,opacity 会影响里面元素的透明度

    3、display:inline-blockie6/7 不支持解决方案:Display:inline-block;Display:inline;

    4、不同浏览器的标签默认的外补丁和内补丁不同问题:

    随便写几个标签,不加样式控制的情况下,各自的 margin 和 padding 差异较大。解决方案:CSS 里*{margin:0;padding:0;}

    5、块属性标签 float 后,又有横行的 margin 情况下,在IE6 显示margin比设置的大

    问题:IE6 中后面的一块被顶到下一行
    解决方案:在 float 的标签样式控制中加入 display:inline;将其转化为行内属性

    6、设置较小高度标签(一般小于 10px),在IE6,IE7 中高度超出自己设置高度

    问题:IE6、7 里这个标签的高度不受控制,超出自己设置的高度
    解决方案:给超出高度的标签设置 overflow:hidden;或者设置行高 line-height 小于你设置的高度。注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8 之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

    7、IE9 一下浏览器不能使用 opacity(必会)解决方案:

    opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

    8、IE6 背景闪烁的问题

    问题:链接、按钮用 CSSsprites 作为背景,在 ie6 下会有背景图闪烁的现象。原因是IE6 没有将背景图缓存,每次触发 hover 的时候都会重新加载
    解决:可以用 JavaScript 设置 ie6 缓存这些图片:
    document.execCommand("BackgroundImageCache", false, true);

    9、event 事件问题:

    //event 事件问题

    document.onclick=function(ev){//谷歌火狐的写法,IE9 以上支持,往下不支持;
    var e=ev; console.log(e);
    
    }
    document.onclick=function(){//谷歌和 IE 支持,火狐不支持;
    var e=event; console.log(e); }
    document.onclick=function(ev){//兼容写法;
    var e=ev||window.event; var mouseX=e.clientX;//鼠标 X 轴的坐标
    var mouseY=e.clientY;//鼠标 Y 轴的坐标
    }
    

    10、DOM 节点相关的问题

    //DOM 节点相关,主要兼容 IE 6 7 8

    function nextnode(obj){//获取下一个兄弟节点
    if (obj.nextElementSibling) {
    return obj.nextElementSibling; } else{
    return obj.nextSibling; }; }
    function prenode(obj){//获取上一个兄弟节点
    if (obj.previousElementSibling) {
    return obj.previousElementSibling; } else{
    return obj.previousSibling; }; }
    function firstnode(obj){//获取第一个子节点
    if (obj.firstElementChild) {
    return obj.firstElementChild;//非 IE678 支持
    } else{
    return obj.firstChild;//IE678 支持
    }; }
    function lastnode(obj){//获取最后一个子节点
    if (obj.lastElementChild) {
    return obj.lastElementChild;//非 IE678 支持
    } else{
    return obj.lastChild;//IE678 支持
    }; }
    

    11、设置监听事件:

    //设置监听事件

    function addEvent(obj,type,fn){//添加事件监听,三个参数分别为 对象、事件类型、事件处理函数,默认为 false
    if (obj.addEventListener) { obj.addEventListener(type,fn,false);//非 IE
    } else{ obj.attachEvent('on'+type,fn);//ie,这里已经加上 on,传参的时候注意不要重复加了}; }
    function removeEvent(obj,type,fn){//删除事件监听
    
    if (obj.removeEventListener) { obj.removeEventListener(type,fn,false);//非 IE
    } else{ obj.detachEvent('on'+type,fn);//ie,这里已经加上 on,传参的时候注意不要重复加了}; }
    

    12、阻止事件冒泡:

    //js 阻止事件冒泡,这里使用 click 事件为例

    document.onclick=function(e){ var e=e||window.event; if (e.stopPropagation) { e.stopPropagation();//W3C 标准
    }else{ e.cancelBubble=true;//IE.... }
    }
    

    13、阻止默认事件:

    //js 阻止默认事件

    document.onclick=function(e){ var e=e||window.event; if (e.preventDefault) { e.preventDefault();//W3C 标准
    }else{ e.returnValue='false';//IE.. }
    }
    

    14、IOS 移动端 click 事件 300ms 的延迟响应解决方案:

    fastclick 可以解决在手机上点击事件的 300ms 延迟
    zepto 的 touch 模块,tap 事件也是为了解决在 click 的延迟问题
    触 摸事 件 的响 应顺 序 为 touchstart --> touchmove --> touchend --> click,也可以通过绑定ontouchstart 事件,加快对事件的响应,解决 300ms 延迟问题
    

    15、一些情况下对非可点击元素如(label,span)监听click 事件,ios 下不会触发

    解决方案:css 增加 cursor:pointer

    16、三星手机遮罩层下的 input、select、a 等元素可以被点击和focus(点击穿透)

    有两种解决方案,
    1.是通过层显示以后加入对应的 class 名控制,截断显示层下方可获取焦点元素的事件获取
    
    2.是通过将可获取焦点元素加入的 disabled 属性,也可以利用属性加 dom 锁定的方式(disabled的一种变换方式)
    

    17、 Input 的 placeholder 会出现文本位置偏上的情况

    input 的 placeholder 会出现文本位置偏上的情况:

    PC 端设置 line-height 等于height 能够对齐,而移动端仍然是偏上,解决是设置 line-height:normal

    展开全文
  • 所以浏览器兼容性问题一般指:css兼容、js兼容 常见的浏览器内核: 常见的浏览器内核可以分四种:Trident、Gecko、Blink、Webkit IE浏览器 Trident内核,也成为IE内核 Chrome浏览器 Webkit内核,现在是...
  • 360浏览器 IE+Chrome双内核 猎豹浏览器 IE+Chrome双内核 百度浏览器 IE内核 QQ浏览器 Trident(兼容模式)+Webkit(高速模式) 常见的兼容性问题: 1. 不同浏览器的标签默认的外补丁( margin )和内补丁(padding)...
  • 常见前端兼容性问题

    千次阅读 2018-08-06 20:08:09
    * png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.也可以引用一段脚本处理. * 浏览器默认的margin和padding不同。解决方案是加一个全局的 ...* 浮动ie产生的双倍距离(IE6双边距问题:在I...
  • WEB前端开发人员须知的常见浏览器兼容问题及解决技巧_徐小七七的博客-CSDN博客_前端浏览器兼容...
  • 前端开发常见的兼容性问题

    千次阅读 2019-07-24 15:37:55
    作为一个前端开发者,最烦恼的应该是如何让...css 方面的兼容问题 设置透明度 ==IE浏览器使用滤镜实现== filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50) ==非IE浏览器== opacity:0.5 ...
  • 1. 最常见的:每个浏览器的默认margin,padding大小都不同,当设置定位时会有些许差异。 解决方案:这也是最容易解决的, 在css样式文件中重置margin,padding ...3. min-height问题:由于min-height本身就是一个不...
  • 前端浏览器兼容性问题和解决办法

    万次阅读 多人点赞 2019-06-11 14:18:22
    所以浏览器的兼容性问题前端开发人员经常会碰到和必须要解决的问题。 浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的marg...
  • iPhone前端兼容性问题汇总

    万次阅读 2015-07-15 19:55:38
    在做一个微信Web项目开发过程中,遇到iPhone(主要iPhone4/4S)兼容性问题,记录如下。 问题: 1. 页面在iPhone下出现左右滑动的问题; 2. 顶部标题在iPhone4/4S下宽度不能100%; 3. iPhone4/4S下在input弹出...
  • 问题描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上当点击输入的时候,光标的高度和父盒子的高度一样,看起来很怪异。例如下图,左图是正常所期待的输入框光标,右边是IOS的 input 光标。 ...
  • web前端兼容性面试题汇总

    千次阅读 2021-05-27 15:25:34
    1.H5新标签在IE9以下的浏览器识别 <!–[if lt IE 9]> ...二、CSS样式的兼容性 1.css的hack问题:主要针对IE的不同版本,不同的浏览器的写法不同 IE的条件注释hack: 2.IE6双边距问题:I
  • 前端浏览器兼容问题以及解决方法

    千次阅读 2021-09-14 10:58:55
    所以浏览器的兼容问题 一般是 css兼容问题,js兼容问题。 二、浏览器的渲染内核 浏览器 内核(渲染引擎) Chrome谷歌 之前Webkit,已改Blink内核 FireFox火狐 Gecko Safari苹果 Webkit IE ...
  • 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0; 浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比...
  • web前端兼容性面试题汇总 一、html部分 1.H5新标签在IE9以下的浏览器识别 html5shiv.js下载地址 2.ul标签内外边距问题ul标签在IE6\IE7中,有个默认的外边距,但是在IE8以上及其他浏览器中有个默认的内边距。 解决...
  • 前端面试:所问到的兼容问题

    千次阅读 2020-09-24 08:39:32
    前端兼容性问题分三类: 浏览器兼容问题IE6、7、8不支持HTML5、CSS3、SVG标准,可被判定为“极难兼容” IE9不支持Flex、Web Socket、WebGL,可被判定为“较难兼容” IE10部分支持Flex(-ms-flexbox)、Web Socket,...
  • 1、Chrome上能够正常打开网页,可是在IE11上打开一片空白,打开控制台报语法错误,以下图:点击chunk-vendors.js后发现是vue-baidu-map组件报错,以下图:缘由:vue-baidu-map组件可能不兼容IE11。解决办法:在vue....
  • 前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了,更让人头疼的是,还要面临各种适配、兼容性问题。 为什么会有浏览器兼容性问题? 还不是因为浏览器厂商太多了! Chrome,Frirefox,Safari,...
  • web前端各浏览器兼容性问题(干货,亲测有效)

    万次阅读 多人点赞 2018-04-12 10:13:58
    const问题说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量. 解决方法:统一使用var关键字来定义常量.12. event.srcElement问题问题说明:IE下,event对象有srcElement...
  • xp效果: ![图片说明](https://img-ask.csdn.net/upload/201708/24/1503564884_335471.png) win7效果: ![图片说明]... ...为什么在xp系统就乱了 但是两个系统的浏览器版本都是一样的只不过系统不一样?...
  • 前端面试——浏览器兼容问题

    万次阅读 2019-03-26 23:23:28
    前端面试——浏览器兼容问题一、css样式兼容性问题 一、css样式兼容性问题 ie8浏览器不支持css3,像: ie8对选择器支持情况 ie8支持:first-child,但不支持:last-child、:last-of-type、:first-of-type、:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 128,826
精华内容 51,530
关键字:

前端兼容性问题