精华内容
下载资源
问答
  • 前端浏览器兼容
    千次阅读
    2022-01-12 20:42:04

    前言:

    不同浏览器的内核不尽相同,所以各个浏览器对网页的解析存在一定的差异。
    浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎
    所以浏览器兼容性问题一般指:css兼容、js兼容

    常见的浏览器内核:

    常见的浏览器内核可以分四种:Trident、Gecko、Blink、Webkit

    IE浏览器Trident内核,也成为IE内核
    Chrome浏览器Webkit内核,现在是Blink内核
    Firefox浏览器Gecko内核,俗称Firefox内核
    Safari浏览器Webkit内核
    Opera浏览器最初是自己的Presto内核,后来加入谷歌大军,从Webkit又到了Blink内核;
    360浏览器IE+Chrome双内核
    猎豹浏览器IE+Chrome双内核
    百度浏览器IE内核
    QQ浏览器Trident(兼容模式)+Webkit(高速模式)

    常见的兼容性问题:

    1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同

    解决方案: css 里增加通配符 * { margin: 0; padding: 0; }

    2、IE6双边距问题;在 IE6中设置了float , 同时又设置margin , 就会出现边距问题

    解决方案:设置display:inline;

    3、当标签的高度设置小于10px,在IE6、IE7中会超出自己设置的高度

    解决方案:超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

    4、图片默认有间距

    解决方案:使用float 为img 布局

    5、IE9一下浏览器不能使用opacity

    解决方案:

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

    6、边距重叠问题;当相邻两个元素都设置了margin 边距时,margin 将取最大值,舍弃最小值;

    解决方案:为了不让边重叠,可以给子元素增加一个父级元素,并设置父级元素为overflow:hidden;

    7、cursor:hand 显示手型在safari 上不支持

    解决方案:统一使用 cursor:pointer

    8、两个块级元素,父元素设置了overflow:auto;子元素设置了position:relative ;且高度大于父元素,在IE6、IE7会被隐藏而不是溢出;

    解决方案:父级元素设置position:relative

    更多相关内容
  • 前端浏览器兼容问题以及解决方法

    千次阅读 2021-09-14 10:58:55
    所以浏览器兼容问题 一般是 css兼容问题,js兼容问题。 二、浏览器的渲染内核 浏览器 内核(渲染引擎) Chrome谷歌 之前Webkit,已改Blink内核 FireFox火狐 Gecko Safari苹果 Webkit IE ...

    首先:

    不同浏览器的内核不尽相同,所以浏览器对网页的解析也有所差异。

    浏览器的内核主要分为两种: 一、 渲染引擎 二、JS引擎。

    所以浏览器的兼容问题 一般是  css兼容问题,js兼容问题。

    二、浏览器的渲染内核

    浏览器内核(渲染引擎)
    Chrome谷歌之前Webkit,已改Blink内核
    FireFox火狐Gecko
    Safari苹果Webkit
    IETrident
    Opera欧朋现已改用Google Chrome的Blink内核

    三、css兼容问题

    1.不同浏览器的标签默认的(margin和 padding不同

    问题症状: 随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。

    解决办法:第一种:我们一般使用 通配符(*)设置margin:0;padding:0;性能不好!

                     第二种:一般我们会引入reset.css样式重置 (推荐)

    2.css3新属性,加浏览器前缀兼容早期浏览器

    -moz- /* 火狐浏览器 /
    -webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
    -o- / Opera浏览器(早期) /
    -ms- / IE */

    哪些css3属性需要加:

    定义关键帧动画 @keyframes
    css3中的变形(transform)、过渡(transtion)、动画(animation)
    border-radius 圆角
    box-shadow  盒子阴影
    flex  弹性布局
    ....
    

    3. 块属性标签float后,又有横行的margin情况下,IE 浏览器margin加倍的问题

    常见症状:IE6中后面的一块被顶到下一行

    解决办法:这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline

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

    常见症状:设置div高度小于10px,IE6、7和遨游里div的高度,超出自己设置的10px.

    解决办法

    1. 给超出高度的标签设置overflow:hidden;
    2. 或者设置行高line-height 小于你设置的高度。

    5. 超链接访问过后hover样式就不出现的问题

    常见症状:被点击访问过的超链接样式不在具有hover和active了

    解决办法:是改变CSS属性的排列顺序: L-V-H-A

    <style type="text/css">
    
    a:link {}
    a:visited {}
    a:hover {}
    a:active {}
    
    </style>
    

    6.图片有默认间距

    常见症状: 几个img标签放在一起的时候有些浏览器会有默认的间距通配符清除间距也不起作用。

    解决办法:(font-size:0)    使用float属性为img布局(所有图片左浮)

    7.css hack解决浏览器兼容性

    不同浏览器,识别不同的样式,csshack本身就是处理浏览器兼容的。
    下面是css hack写法:

    background-color:yellow0; 0 是留给ie8的
    +background-color:pink;   + ie7定了;
    _background-color:orange; _专门留给神奇的ie6;
    

    四、js兼容问题

    后续更新!!!
     

    展开全文
  • web前端浏览器兼容性问题,以及其他新知识点:例如SEO javascript mate等问题
  • 花了近2个月时间挨个整理了网上上百篇的面试题,将一些错误进行了矫正,当然前端的答案并非绝对,各抒己见吧
  • 关于前端浏览器兼容性问题的总结

    千次阅读 2020-08-07 17:41:14
    关于前端浏览器兼容性问题的总结

    浏览器兼容性问题的原因

    浏览器的兼容性问题,是我们在前端开发过程中必须要考虑到的问题,目前市面上的浏览器种类很多,所以导致对我们的代码的解析会存在多多少少的差异,但是有时候我们又必须要使用存在差异的代码,此时就需要对代码进行兼容性处理。主流浏览器的内核基本大同小异,这里大致可分为四种:Webkit内核、Presto内核、Trident内核、Gecko内核。 下图为国内常见浏览器的内核对比:

    在这里插入图片描述

    常见的浏览器兼容性问题以及解决办法

    问题1:不同浏览器的元素标签默认的内外边距不同
    解决方法:在全局css中使用通配符处理 *{margin:0;padding:0;}

    问题2:img标签默认有间距
    解决方法:使img浮动

    问题3:cursor属性的兼容性问题
    解决方法:firefox不支持hand,但ie支持pointer,统一使用pointer

    问题4:IE浏览器不识别 min- 标志
    解决方法:将两者都写上,例如 width: 80px;height: 35px; min-width: 80px; min-height: 35px;

    问题5:JS获取浏览器窗口大小的兼容性问题
    解决方法:使用兼容性写法,例如:获取网页内容实际宽高的写法
    var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
    var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

    问题6:event事件问题
    解决方法:兼容性写法:document.onclick = function(ev){ var e = ev || window.event; //获取到event对象 }

    问题7:JS 中innerText问题
    解决方法:IE浏览器中使用textContent

    问题8:JS中设置事件与移除事件的问题
    解决方法:

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

    问题9:JS中阻止默认事件和阻止事件传播的兼容性问题
    解决方法:

    //js阻止事件传播
        document.onclick=function(e){
            var e=e||window.event;  //获取事件对象的兼容性写法,上文提过
            if (e.stopPropagation) {
                e.stopPropagation();//非IE
            }else{
                e.cancelBubble=true;//IE写法
        	}
    //js阻止默认事件
        document.onclick=function(e){
            var e=e||window.event;
            if (e.preventDefault) {
                e.preventDefault();//非IE
            }else{
                e.returnValue=false;//IE写法
        	}
    

    问题10:JS中鼠标滚轮事件的兼容性问题
    解决方法:

    	//火狐中的滚轮事件
        document.addEventListener("DOMMouseScroll",function(event){
            alert(event.detail);//若前滚的话为 -3,后滚的话为 +3
        },false)
        //非火狐中的滚轮事件
        document.onmousewheel=function(event){
            alert(event.detail);//前滚:+120,后滚:-120
        }
    
    
    展开全文
  • 前端浏览器兼容性问题和解决办法

    万次阅读 多人点赞 2019-06-11 14:18:22
    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的...

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
    浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同
    问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。

    解决方案:在css中使用通配符 *

    备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
    浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大
    问题症状:常见症状是IE6中后面的一块被顶到下一行

    解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性

    备注:我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。
    浏览器兼容问题三:设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度
    问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度

    解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

    备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。
    4,浏览器兼容问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug

    问题症状:IE6里的间距比超过设置的间距

    解决方案:在display:block;后面加入display:inline;display:table;

    备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input/img标签比较特殊)。在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

    5,浏览器兼容问题五:图片默认有间距

    问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,通配符清除间距也不起作用。
    解决方案:使用float属性为img布局

    备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。(也可使用负margin,虽然能解决,但负margin本身就是容易引起浏览器兼容问题的用法,所以尽量不要使用)

    6,浏览器兼容问题六:标签最低高度设置min-height不兼容

    问题症状:因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容

    解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}

    备注:在B/S系统前端开发时,有很多情况下我们有这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。

    7.hack方法兼容

    解决方法:这个hack语句比较多,就简单的列举几个
    css hack:
    \9 ie10之前的ie浏览器解析的代码
    +或者* 表示ie7包括7之前的ie浏览器
    _表示 ie6包括6之前的ie浏览器

    8. 浮动ie产生的双倍距离

    #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离display:inline; //使浮动忽略}

    这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);

    #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;

    9.IE与宽度和高度的问题

    IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。比如要设置背景图片,这个宽度是比较重 要的。要解决这个问题,可以这样:

    #box{ width: 80px; height: 35px;}html>body #box{width: auto; height: auto; min-width: 80px; min-height: 35px;}

    10.页面的最小宽度

    min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个

    放到 标签下,然后为div指定一个类:
    然后CSS这样设计:

    #container{
    min-width: 600px;
    width:e-xpression(document.body.clientWidth < 600? “600px”: “auto” );
    }

    第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

    11.DIV浮动IE文本产生3象素的bug

    左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.

    #box{
    float:left;
    width:800px;}
    #left{
    float:left;
    width:50%;}
    #right{
    width:50%;
    }
    *html #left{
    margin-right:-3px;
    //这句是关键
    }
    HTML代码

    12. IE捉迷藏的问题

    当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。
    有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。
    解决办法:对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

    13.超链接点击过后hover样式就不出现的问题?

    被点击访问过的超链接样式不再具有hover和active样式了,解决方法是改变CSS属性的排列顺序: L-V-H-A

    14.为什么web标准中无法设置IE浏览器滚动条颜色了?

    原来样式设置:

    解决办法是将body换成html

    15.如何定义1px左右高度的容器?

    IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

    16.水平居中的问题

    问题:设置 text-align: center ie6-7文本居中,嵌套的块元素也会居中ff /opera /safari /ie8文本会居中,嵌套块不会居中,

    解决:

    块元素设置

    1、margin-left:auto;margin-right:auto

    2、margin:0 auto;

    3、

    17.td高度的问题

    问题:table中td的宽度都不包含border的宽度,但是oprea和ff中td的高度包含了border的高度

    解决:设置line-height和height一样。在ie中如果td中的没有内容,那么border将不会显示

    18.div嵌套p时,出现空白行

    问题:div中显示

    文本

    ,ff、oprea、Chrome:top和bottom都会出现空白行,但是在ie下不会出现空白行。

    解决:设置p的margin:0px,再设置div的padding-top和padding-bottom

    19.IE6两个层之间3px的问题

    问题:左边层采用浮动,右边没有采用浮动,这时在ie6中两层之间就会产生3像素的间距

    解决:1、右边层也采用浮动 float 2、左边层添加属性 margin-right:-3px;

    20.IE6 子元素绝对定位的问题

    问题: 父级元素使用padding后,子元素使用绝对定位,不能精确定位

    解决: 在子元素中设置 _left:-20px; _top:-1px;

    21.单选框、复选框与后面的文字对不齐

    问题:

     单选框、复选框与后面的文字对不齐。
    

    解决:

    .align{font-size:12px;}

    .align input{ display:block; float:left;}

    .align label{ display:block; float:left;padding-top:3px; *padding-top:5px;}

    22.子容器宽度大于父容器宽度时,内容超出

    问题:

    子DIV的宽度和父DIV的宽度都已经定义,在IE6中如果其子DIV的宽度大于父DIV的宽度,父DIV的宽度将会被扩展,在其他浏览器中父DIV的宽度将不会扩展,子DIV将超出父DIV

    解决:

    设置overflow:hidden,子DIV将不会超出父DIV。

    23.chrome绝对定位无效

    问题:

    在IE给td设置position:relative,然后给它包含的一个容器使用position:absolute进行定位是有效的,但在FF和Chrome下却不可以。

    解决:

    设置td的display:block。

    24.div嵌套p时,出现空白行

    问题:

    div中显示

    文本

    ,ff、oprea、Chrome:top和bottom都会出现空白行,但是在ie下不会出现空白行。

    解决:

    设置p的margin:0px,再设置div的padding-top和padding-bottom

    25.在使用绝对定位或者相对定位后,IE中设置z-index失效,原因是因为其元素依赖于父元素的z-index,但是父元素默认为0, 子高父低,所以不会改变显示的顺序

    26.透明度属性问题

    解决方案:针对IE浏览器:filter:alpha(opacity=value);(取值范围1–100)

    兼容其他浏览器:opacity:value;(取值范围0–1)

    27.上下margin的重叠问题

    描述:给上边元素设置了margin-bottom,给下边元素设置了margin-top,浏览器只会识别较大值;

    解决方案:margin-top和margin-bottom中选择一个,只设置其中一个值;

    28.ul和ol列表缩进问题
    方法:消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px;
    在IE中,设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;
    在 Firefox 中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须设置list- style:none才能去除列表编号或圆点。

    javascript部分

    1. document.form.item 问题
    问题:
    代码中存在 document.formName.item(“itemName”) 这样的语句,不能在FF下运行
    解决方法:
    改用 document.formName.elements[“elementName”]

    2. 集合类对象问题
    问题:
    代码中许多集合类对象取用时使用(),IE能接受,FF不能
    解决方法:
    改用 [] 作为下标运算,例:
    document.getElementsByName(“inputName”)(1) 改为document.getElementsByName(“inputName”)[1]

    3. window.event
    问题:
    使用 window.event 无法在FF上运行
    解决方法:
    FF的 event 只能在事件发生的现场使用,此问题暂无法解决。可以把 event 传到函数里变通解决:
    onMouseMove = “functionName(event)”
    function functionName (e) {
    e = e || window.event;

    }

    4. HTML对象的 id 作为对象名的问题
    问题:
    在IE中,HTML对象的 ID 可以作为 document 的下属对象变量名直接使用,在FF中不能
    解决方法:
    使用对象变量时全部用标准的 getElementById(“idName”)

    5. 用 idName 字符串取得对象的问题
    问题:
    在IE中,利用eval(“idName”) 可以取得 id 为 idName 的HTML对象,在FF中不能
    解决方法:
    用 getElementById(“idName”) 代替 eval(“idName”)

    6. 变量名与某HTML对象 id 相同的问题
    问题:
    在FF中,因为对象 id 不作为HTML对象的名称,所以可以使用与HTML对象 id 相同的变量名,IE中不能
    解决方法:
    在声明变量时,一律加上 var ,以避免歧义,这样在IE中亦可正常运行
    最好不要取与HTML对象 id 相同的变量名,以减少错误

    7. event.x 与 event.y 问题
    问题:
    在IE中,event 对象有x,y属性,FF中没有
    解决方法:
    在FF中,与 event.x 等效的是 event.pageX ,但event.pageX IE中没有
    故采用 event.clientX 代替 event.x ,在IE中也有这个变量
    event.clientX 与 event.pageX 有微妙的差别,就是滚动条
    要完全一样,可以这样:
    mX = event.x ? event.x : event.pageX;
    然后用 mX 代替 event.x

    8. 关于frame
    问题:
    在IE中可以用 window.testFrame 取得该frame,FF中不行
    解决方法:
    window.top.document.getElementById(“testFrame”).src = ‘xx.htm’
    window.top.frameName.location = ‘xx.htm’

    9. 取得元素的属性
    在FF中,自己定义的属性必须 getAttribute() 取得

    **10. 在FF中没有parentElement,parement.children 而用 parentNode,parentNode.childNodes
    问题:
    childNodes 的下标的含义在IE和FF中不同,FF的 childNodes 中会插入空白文本节点
    解决方法:
    可以通过 node.getElementsByTagName() 来回避这个问题
    问题:
    当html中节点缺失时,IE和FF对 parentNode 的解释不同,例如:

    FF中 input.parentNode 的值为form,而IE中 input.parentNode 的值为空节点 问题: FF中节点自己没有 removeNode 方法 解决方法: 必须使用如下方法 node.parentNode.removeChild(node)

    11. const 问题
    问题:
    在IE中不能使用 const 关键字
    解决方法:
    以 var 代替

    12. body 对象
    FF的 body 在 body 标签没有被浏览器完全读入之前就存在,而IE则必须在 body 完全被读入之后才存在
    这会产生在IE下,文档没有载入完时,在body上appendChild会出现空白页面的问题
    解决方法:
    一切在body上插入节点的动作,全部在onload后进行

    13. url encoding
    问题:
    一般FF无法识别js中的&
    解决方法:
    在js中如果书写url就直接写&不要写&

    14. nodeName 和 tagName 问题
    问题:
    在FF中,所有节点均有 nodeName 值,但 textNode 没有 tagName 值,在IE中,nodeName 的使用有问题
    解决方法:
    使用 tagName,但应检测其是否为空

    15. 元素属性
    IE下 input.type 属性为只读,但是FF下可以修改

    16. document.getElementsByName() 和document.all[name] 的问题
    问题:
    在IE中,getElementsByName()、document.all[name] 均不能用来取得 div 元素
    是否还有其它不能取的元素还不知道(这个问题还有争议,还在研究中)

    17. 调用子框架或者其它框架中的元素的问题
    在IE中,可以用如下方法来取得子元素中的值
    document.getElementById(“frameName”).(document.)elementName
    window.frames[“frameName”].elementName
    在FF中则需要改成如下形式来执行,与IE兼容:
    window.frames[“frameName”].contentWindow.document.elementName
    window.frames[“frameName”].document.elementName

    18. 对象宽高赋值问题
    问题:
    FireFox中类似 obj.style.height = imgObj.height 的语句无效
    解决方法:
    统一使用 obj.style.height = imgObj.height + “px”;
    19. innerText的问题
    问题:
    innerText 在IE中能正常工作,但是innerText 在FireFox中却不行
    解决方法:
    在非IE浏览器中使用textContent代替innerText

    20. event.srcElement和event.toElement问题
    问题:
    IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性
    解决方法:
    var source = e.target || e.srcElement;
    var target = e.relatedTarget || e.toElement;

    21. 禁止选取网页内容
    问题:
    FF需要用CSS禁止,IE用JS禁止
    解决方法:
    IE: obj.onselectstart = function() {return false;}
    FF: -moz-user-select:none;
    22. 捕获事件
    问题:
    FF没有setCapture()、releaseCapture()方法
    解决方法:
    IE:
    obj.setCapture();
    obj.releaseCapture();
    FF:
    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    if (!window.captureEvents) {
    o.setCapture();
    }else {
    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    }
    if (!window.captureEvents) {
    o.releaseCapture();
    }else {
    window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    }

    展开全文
  • 所以浏览器兼容性问题一般指:css兼容、js兼容 一、样式初始化 由于各大浏览器会有自身的默认样式,并且不尽相同,所以为了尽可能的保证样式的统一性,前端在开发项目之前都会先进行样式格式化,最常见的分为以下几...
  • 前端浏览器兼容...
  • 前端面试——浏览器兼容问题

    万次阅读 2019-03-26 23:23:28
    前端面试——浏览器兼容问题一、css样式兼容性问题 一、css样式兼容性问题 ie8浏览器不支持css3,像: ie8对选择器支持情况 ie8支持:first-child,但不支持:last-child、:last-of-type、:first-of-type、:...
  • 浏览器 现在各种各样的浏览器很多,但究其根本都是基于以下几种内核的。 IE浏览器:trident内核(据官方消息,今年6月15日就会停止此浏览器的所有服务);...常见的浏览器兼容问题 1-不同浏览器标签默认
  • WEB前端浏览器兼容性问题(pc端及移动端) PC端 (一)html部分 1.H5新标签在IE9以下的浏览器识别 <!--[if lt IE 9]> <script type="text/javascript" src="js/html5shiv.js"></script> <!...
  • 1. 最常见的:每个浏览器的默认margin,padding大小都不同,当设置定位时会有些许差异。 解决方案:这也是最容易解决的, 在css样式文件中重置margin,padding *{ margin:0; padding:0; } 2. 图片默认有间距:...
  • 市场上浏览器种类很多,不同浏览器的内核也不尽相同,所以各个浏览器对网页的解析存在一定的差异。 浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎,内核更加倾向于说渲染引擎。 常见的浏览器内核: 常见的...
  • 浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大。 解决方案:CSS里*{margin:0; padding:0;} 备注:这个是最常见的...
  • web前端关于浏览器兼容

    千次阅读 2017-10-24 00:24:33
    web前端关于浏览器兼容性所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆...
  • 前端不同浏览器IE, FF, 谷歌等等兼容性解决办法
  • 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些...
  • 面试前端,面试官问你怎么解决浏览器兼容性问题,你应该怎么回答??
  • 主要介绍了前端开发必备:12款浏览器兼容性测试工具推荐,浏览器兼容性测试工具一般都具备模拟当前主流浏览器的功能,例如国内用的比较多的IETester,就可以模拟IE6、IE7、IE8等,这样就方便了前端的CSS和JS的调试,需要...
  • WEB前端浏览器兼容问题处理

    千次阅读 2018-09-04 11:31:56
    问题一:不同浏览器的标签默认的外补丁和内补丁不同 ... 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的css文件开头都会用通配符*来设置各个标签的内外补丁是0。 问题二:块属性标签float...
  • 前端处理浏览器兼容问题
  • 为何会出现浏览器兼容问题 同一产品,版本越老bug越多; 同一产品,版本越新,功能越多; 不同产品,不同标准,不同实现方式; 处理兼容问题的思路 1 要不要做 产品的角度(产品的受众、受众的浏览器比例、效果...
  • 前端规范和浏览器兼容

    千次阅读 2017-10-31 17:32:41
    **一、前端规范** 很多时候我们在写页面的时候都会遇到这样一个问题:不知道给类取什么名?当代码量很多的时候,就算取了,我们想找到它也很难。所以说,前端也需要有代码规范,这样对后期的修改和维护都起到很大的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 136,158
精华内容 54,463
关键字:

前端浏览器兼容