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

    2019-05-25 19:22:52
    浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。所以在网站的设计和制作中,做好浏览器兼容,才能够让网站在不同的浏览器下都正常...

    什么是浏览器的兼容性

    浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。所以在网站的设计和制作中,做好浏览器兼容,才能够让网站在不同的浏览器下都正常显示。

    浏览器的兼容性无非还是样式兼容性(css),交互兼容性(javascript),浏览器 hack 三个方面

    样式兼容性(css)

    image

    normalize.css

    1.图片间隙

    div中的图片间隙
    bug:在块元素中插入图片时,有时图片会将块元素下方撑大三像素。
    Hack:给<img>添加声明:display:block
    

    2.表单元素行高不一致(IE,MOZ,C,O,S)

    bug:表单元素行高对齐方式不一致
    hack:给表单元素添加声明:float:left;
    

    3.按钮元素默认大小及样式不一致

    hack1: 统一大小及样式(用a标记模拟)
    hack2:如果这个按钮是一个图片,直接把图片作为按钮的背景图即可。
    

    4.鼠标指针bug

    描述:cursor属性的hand属性值只有IE8浏览器识别;
    hack:如统一某元素鼠标指针形状为手型,应添加声明:cursor:pointer;
    

    5.透明属性

    IE浏览器写法:filter:alpha(opacity=数值);取值范围 1-100(IE8以下)
    兼容其他浏览器写法:opacity:数值;(数值的取值范围0-1,0.1,0.2,0.3-----0.9)
    

    6.父元素里有块元素,如果给子元素添加添加margin-top,父元素会“掉”下来(高度塌陷)

    hack1:给父元素添加overflow:hidden;
    hack2:给子元素添加float;
    hack3:给父元素加边框;
    或者用其他的方法达到我们想要的效果:如给父元素加padding-top
    

    7.双倍浮向(双倍边距)

    描述:当Ie6及更低版本浏览器在解析浮动元素时,会错误地把浮向边的边界加倍显示。
    hack:给浮动元素添加声明:display:inline;
    

    8.当li里的A加display:block或float:left时,出现行高不一致,有的会多出3像素

    hack1:给a加display:inline-block;
    hack2:给a加display:inline;
    hack3:给li加float,再加宽度
    

    9.万能清除浮动法

    父元素选择符:after{content:"."; clear:both; display:block; height:0; overflow:hidden; visibility:hidden;}
    

    10.行内块元素之间空白缝隙的问题

    hack1:利用margin 负值,例如Margin-left:-8px;
    hack2:把行内块写到一行上去
    hack3:给父盒子加:font-size:0;
    

    交互兼容性

    image

    1、event事件

    通用方式
    document.onclick=function(e){
        var e = e || window.event;   //兼容写法
    }
    

    2、一些“方法”的兼容性写法

    停止事件传播
    if(evt.stopPropagation){
        return evt.stopPropagation();    //一定不能漏下evt  方法前一定要写明对象
    }else{
        return evt.cancelbuble();
    }
    
    阻止默认事件
    if (e.preventDefault) {
         e.preventDefault();   //W3C标准
    }else{
         e.returnValue = 'false';    //IE
    }
    
    获取第一个子节点(next,last都类似)
    if (obj.lastElementChild) {
         return obj.firstElementChild;   //非IE6/7/8支持
    } else{
         return obj.firstChild;   //IE6/7/8支持
    };
    
    设置监听事件
    //参数一:对象
    //参数二:事件类型
    //参数三:事件处理函数
    function addEvent(obj, type, fn){
         if (obj.addEventListener) {
              obj.addEventListener(type, fn, false);  //非IE
         } else{
              obj.attachEvent('on' + type, fn);  //IE
         }
    }
    

    3、通过className获取DOM节点

    function getClassName(xxx){
         var atag = document.all ? document.all : document.getElementsByTagName('*');
         var arr = [];
         for (var i = 0; i < atag.length; i++) {
             var reg = new RegExp('\\b' + xxx + '\\b', 'g');
             if (reg.test(atag[i].className)) {
                 arr.push(atag[i]);
             }
         }
         return arr;  //返回的也是数组,包含传入的class所有元素;
    }
    

    4、event.srcElement问题

    IE:event对象有srcElement属性,没有target属性;
    Firefox:even对象有target属性,没有srcElement属性。
    
    srcObj = event.srcElement ? event.srcElement : event.target;
    

    5、firefox与IE的父元素(parentElement)的区别

    IE:obj.parentElement
    firefox:obj.parentNode
    hack:都使用obj.parentNode
    

    移动端常见案例

    1、部分情况下对非可点击元素如(label,span)监听click事件时,ios下不会触发

    hack:css中增加cursor:pointer
    

    2、底部输入框被键盘遮挡问题

    var oheight = $(document).height(); //浏览器当前的高度
    $(window).resize(function(){
         if($(document).height() < oheight){
              $("#footer").css("position", "static");
         }else{
              $("#footer").css("position", "absolute");
         }
    });
    

    3、CSS动画页面闪白,动画卡顿

    //使用综合属性
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    

    4、阻止旋转屏幕时自动调整字体大小

    html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
    

    5、预加载、自动播放无效

    自动播放的有效性受操作系统、浏览器(webview)、版本等的影响,苹果官方规定必须由用户手动触发才会载入音频,所以可以在用户依次输入后,让音频实现预加载:

    document.addEventListener('touchstart', function () {
         document.getElementsByTagName('audio')[0].play();
         document.getElementsByTagName('audio')[0].pause();
    });
    

    6、ios safari时间显示问题

    设置new Date日期格式的时候,在ios中的safari中发现显示效果与其他浏览器不一致。
    只识别:new Date("year/month/day");
    

    7、移动端300ms延迟。

    hack1:一般在移动端用tap事件来取代click事件
    hack2:fastclick可以解决在手机上点击事件的300ms延迟
    

    8、手机上的flex布局时会有兼容性问题

    .box{
        display: -webkit-box;  //老版本语法: Safari, iOS, Android browser, older WebKit browsers. 
        display: -moz-box;     //老版本语法: Firefox (buggy) 
        display: -ms-flexbox;  //混合版本语法: IE 10 
        display: -webkit-flex; //新版本语法: Chrome 21+ 
        display: flex;         //新版本语法: Opera 12.1, Firefox 22+
    

    浏览器hack

    image

    1、Firefox

    @-moz-document url-prefix() { .selector { property: value; } }
    

    上面是仅仅被Firefox浏览器识别的写法,具体如:

    @-moz-document url-prefix() { .demo { color:lime; } }
    

    支持Firefox的还有几种写法:

    /* 支持所有firefox版本 */ #selector[id=selector] { property: value; } 
    或者: @-moz-document url-prefix() { .selector { property: value; }  
    /* 支持所有Gecko内核的浏览器 (包括Firefox) */ *>.selector { property: value; }
    

    2、Webkit枘核浏览器(chrome and safari)

    @media screen and (-webkit-min-device-pixel-ratio:0) { Selector { property: value; } }
    /*上面写法主要是针对Webkit内核的浏览器,如Google Chrome 和 Safari浏览器:*/
    @media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: #f36; } }
    

    3、Opera浏览器

    html:first-child>body Selector {property:value;}
    /*或者:*/ @media all and (min-width:0) { Selector {property: value;} } 
    /*或者:*/ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body Selector { property: value; } }
    /*上面则是Opera浏览器的Hack写法:*/
    @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo { background: green; } }
    

    4、IE9浏览器

    :root Selector {property: value9;}
    /*上面是IE9的写法,具体应用如下:*/
    :root .demo {color: #ff09;}
    

    5、IE9以及IE9以下版本

    Selector {property:value9;}
    /*这种写法只有IE9以及IE9以下版本能识别,这里需要注意此处“9”只能是“9”不能是别的,比如说“8”,不然会失去效果的,如:*/
    
    .demo {background: lime9;}
    

    6、IE7浏览器

    *+html Selector{property:value;} 或 *:first-child+html Selector {property:value;}
    /*上面两种是IE7浏览器下才能识别,如:*/
    *+html .demo {background: green;} 或者: *:first-child+html .demo {background: green;}
    

    7、IE7及IE7以下版本浏览器

    Selector {*property: value;}
    /*上面的写法在IE7以及其以下版本都可以识别,如:*/
    

    .demo {*background: red;}
    8、IE6浏览器

    加_下划线即可
    

    CSS选择器的Hack写法

    下面我们主要来看CSS选择器和CSS属性选择器在不同浏览器的支持情况。下面先来看CSS选择器支持情况。

    1、IE6以及IE6以下版本浏览器

    * html .demo {color: green;}
    * ```
    2、仅仅IE7浏览器
    ```css
    *:first-child+html .demo {color: green;}
    

    3、除IE6之外的所有浏览器(IE7-9, Firefox,Safari,Opera)

    html>body .demo {color: green;}
    

    4、IE8-9,Firefox,Safari,Opear

    html>/**/body .demo {color: green;}
    

    5、IE9+

    :root .demo {color: red;}
    

    6、Firefox浏览器

    @-moz-document url-prefix() { .demo { color: red; } }
    

    7、Webkit内核浏览器(Safari和Google Chrome)

    @media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: red; } }
    

    8、Opera浏览器

    @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo { color: red; } }
    

    9、iPhone / mobile webkit

    @media screen and (max-device-width: 480px) { .demo { color: red } }
    

    CSS属性Hack写法

    /*1、IE6浏览器*/
    .demo {_color: red;}
    
    /*2、IE6-7浏览器识别*/
    .demo {*color: red;}
    
    /*3、所有浏览器除IE6浏览外*/
    .demo {color/**/:red;}
    
    /*4、IE6-9浏览器*/
    .demo {color: red9;}
    
    /*5、IE7-8浏览器*/
    .demo {color/***/:red9;}
    

    IE条件注释,全部采用选择器Hack的写法。这种写法分两步:

    1、创建条件样式表,并在HTML中body里添加相应的class类名:

    <!–[if IE6]–><<!–[if IE7]–><!–[if IE8]–><!–[if IE9]–><!–[if !IE]–>
    

    2、接着创建对应的样式

    .demo {color: blue;}/*现代浏览器*/ 
    .non-ie .demo {color: red;}/*除IE外浏览器*/ 
    .ie9 .demo {color: yellow;}/*IE9浏览器*/ 
    .ie8 .demo{color: green;}/*IE8浏览器*/ 
    .ie7 .demo {color: orange;}/*IE7浏览器*/
    .ie6 .demo {color: lime;}/*IE6浏览器*/ 
    @media all and (min-width: 0px){ .demo {color:black;} /* webkit and opera */
    @media screen and (-webkit-min-device-pixel-ratio:0){ .demo{color:#369;}/* webkit */ 
    @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo{color:#cf6;}/* opera */ 
    @-moz-document url-prefix(){ .demo{color:#963;}/* firefox * / 
    
    展开全文
  • 浏览器兼容性解决之道 前言 浏览器兼容性一直是前端开发中不得不面对的一个问题。而最突出的就是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

    美文美图

     

    展开全文
  • 一、浏览器的内核 IE:trident内核 Firefox(火狐):gecko内核 Chrome:Blink(基于Webkit) ...二、CSS浏览器兼容性 -moz- 火狐 -o- opera早期 -webkit- 谷歌、safari -ms- IE 三、JS浏览...

    一、浏览器的内核

    IE:trident内核

    Firefox(火狐):gecko内核

    Chrome:Blink(基于Webkit)

    Safari:Webkit内核

    Oprea:现用Blink,以前是presto内核

    二、CSS浏览器兼容性

    -moz-   火狐

    -o-        opera早期

    -webkit-     谷歌、safari

    -ms-    IE

    三、JS浏览器兼容的写法

    (参考博客:https://www.cnblogs.com/May-J-Wang/p/6995288.html

    浏览器兼容问题有很多,包括个浏览器元素查找问题、DOM操作以及事件。下面列举几种常见JS事件的兼容性写法。

    1、js阻止默认事件

    var e = event ? || window.event;  简写形式: var e=e || window.event;

    //如果存在event,那么var e=event;如果不存在event,那么var e=window.event,为了实现多种浏览器兼容

    //js阻止默认事件
    document.onclick = function(e){
        var e = event ? || window.event;
        if(e.preventDefault){
            e.preventDefault();  //W3C标准
        } else {
            e.returnValue = fasle; //IE
        } 
    }

    2、阻止事件冒泡事件

    //阻止冒泡事件
    document.onclik = function(e){
        var e = e || window.event;
        if(e.stopPropagation){
            e.stopPropagation(); //W3C
        } else {
            e.cancelBlue = true;
        }
    }

    3、获取事件及事件对象目标

    getEvent:function(e){
        return e || window.event;
    };
    getTarget:function(e){
        return e.target || event.srcElement;
    };

     4、添加事件方法

    //在标准浏览器中绑定事件
    addHandler:function(element,type,handler){
        if(element.addEventListener){        //检测是否为DOM2级方法
            element.addEventListener(type, handler, false);
        }else if (element.attachEvent){      //检测是否为IE级方法
            element.attachEvent("on" + type, handler);
        } else {                            //检测是否为DOM0级方法
            element["on" + type] = handler;
        };
    };
    
    //解除事件绑定
    removeHandler: function (element, type, handler) {
        if (element.removeEventListener()) {
           element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
           element.detachEvent("on" + type, handler);
        } else {
           element["on" + type] = null;
        }
    }

     

    展开全文
  • 浏览器兼容性测试产生浏览器兼容性问题的原因:不同浏览器使用内核及所支持的html等网页语言标准同,以及客户端的环境不同(如分辨率不同)造成效果不能达到理想效果。最常见的问题就是:网页元素位置混乱、错位内核...

    浏览器兼容性测试

    产生浏览器兼容性问题的原因:不同浏览器使用内核及所支持的html等网页语言标准同,以及客户端的环境不同(如分辨率不同)造成效果不能达到理想效果。

    最常见的问题就是:网页元素位置混乱、错位

    内核:决定浏览器如何显示网页的内容以及页面的格式信息

    常见浏览器内核:

    Ie内核:qq、搜狗、百度、360、世界之窗等

    Webkit内核:Safari、Chrome 手机浏览器都是webkit内核

    Gecko内核: 火狐浏览器(Firefox) it类用的多

    Presto内核:opera浏览器

    谷歌体积小、浏览网页速度快、安全性高、简洁

    Firefox:多操作系统系统支持、兼容、速度快、全屏截图、firebug抓包等

    Ie8 ie9:微软自带

    以下情况需做兼容性测试:1、网页浏览器兼容测试:用户需求、指定需求2、提高用户使用量等

    兼容性测试内容:页面格式、字体、输入框、下拉框、复选框、按钮等-功能测试过程中同步做 例:2个测试人员如兼容多个浏览器,两位分浏览器做自己负责项目部分

    问题1:用户反馈小众浏览器有问题,公司如何处理)-----换个做过兼容性测试的浏览器

    问题2:如果一个网站分为前台访问系统、后台管理系统、是否都需要做兼容性测试?-----后台管理系统不会做兼容性测试

    前台访问系统:用户访问地址

    后台管理系统:工作人员管理地址

    百度统计流量:https://tongji.baidu.com/data/browser

    2096c413a747c9e1948b177a94909462.png

    App兼容测试:也能看到数据参考

    常用浏览器兼容测试工具:

    A:ietester,容易崩溃

    B:在虚拟机里面装不同版本的ie浏览器

    C、https://app.crossbrowsertesting.com/login 支持不同系统不同版本浏览器兼容性测试,但免费时长不长,需要缴费测试

    D、spoon browser sandbox 启动比较慢,需要注册使用 https://spoon.net/browsers/

    回忆:测试计划---测试用例-----测试报告

    如何编写测试计划:

    包含内容:(5w+1h记忆法):目的(why)、测试范围(what)、测试进度安排(when)、测试人员(who)、测试环境(where)、测试方法+测试工具(how)、风险评估、培训计划

    测试报告(写过没有?包括什么内容?测试报告的重点是什么?---缺陷分析、测试结论)---禅道有bug分析

    测试范围是根据需求规格说明书整理

    每一个发布的版本都有一个测试报告

    测试阶段:按测试版本统计

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

    2019-03-11 21:56:22
    浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中,做好浏览器兼容,才能够让网站在不同的浏览器下都正常显示...
  • 浏览器兼容性测试

    2020-06-21 00:11:48
    浏览器兼容性测试 浏览器兼容性,又叫网页或者网站兼容性问题,是指不同浏览器所用的内核以及所支持的HTML(网页)语言对同一段代码不同的解析造成页面显示不一样的情况,最常见的问题就是页面的元素位置混乱错乱了 ...
  • 最全整理浏览器兼容性问题与解决方案

    万次阅读 多人点赞 2018-02-26 11:44:36
    常见浏览器兼容性问题与解决方案 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站...
  • 浏览器兼容性概述

    2018-08-04 22:36:27
    一、浏览器兼容性 浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中,做好浏览器兼容,才能够让网站在不同的...
  • 正在学习前端,看到一个新词叫浏览器兼容性, 请问浏览器兼容性问题一般都有哪些呢? 通常怎么解决这些问题呢? xiexie~~
  • 到达客户现场后,看到edge浏览器兼容性问题,一个不兼容的软件尝试与Microsoft Edge一起加载。尽管这种问题通常是过期的程序所致,但也可能是由恶意软件引起的。建议安装最新版本的程序,并且确保反恶意软件的运行和...
  • 浏览器兼容性问题,是指因为不同的浏览器标准不同对同一段代码的解析有差异,或是由于浏览器版本的不同,造成页面显示效果不一致。一般程序员的需求是,无论用户用什么浏览器查看页面,都是统一的效果,所以浏览器...
  • 浏览器兼容性测试工具

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

    2017-03-26 12:08:33
    写作目的:记录下这个笼统的浏览器兼容性问题。让自己更清晰一些。浏览器兼容性问题出现的原因就是浏览器内核不同所造成的,那么回顾一下常用浏览器的内核: Trident(只能应用于windows平台,不开源) IE浏览器 ...
  • Bootstrap浏览器兼容性

    万次阅读 2017-01-16 14:22:54
    说到浏览器兼容性,就不得不提国内的浏览器占有率现状,这也使得国内的前端工程师总是需要针对各式各样的浏览器做CSS Hack,倘若你想要通过使用Bootstrap来避免这些额外的编码,那你就错了。 自从推出了...
  • 主要介绍了前端开发必备:12款浏览器兼容性测试工具推荐,浏览器兼容性测试工具一般都具备模拟当前主流浏览器的功能,例如国内用的比较多的IETester,就可以模拟IE6、IE7、IE8等,这样就方便了前端的CSS和JS的调试,需要...
  • 常见浏览器兼容性问题与解决方案

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

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

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

    千次阅读 多人点赞 2019-06-05 19:11:51
        所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。 常见的浏览器内核     四种内核: Trident、Gecko、Blink、Webkit 类型 内核 ...
  • 面试官:你说到有进行浏览器兼容性的测试,那么你是选择哪些浏览器进行测试,为什么这么选择呢?我:选择市场份额较大的一些主流浏览器面试官:不进行分类么?我:尴尬而不失礼貌的微笑赶紧补充了这个知识点,其实...
  • 浏览器兼容性问题适配,通过单独写css样式,适配各类浏览器兼容性,特别是针对IE8-9。 1-1.条件性注释(Conditional comments) [只有IE9及以前版本支持] 引入语法: 在css里使用如下标识符可以被ie识别而采用,...
  • Windows edge浏览器兼容性问题

    千次阅读 2020-12-23 13:26:53
    Windows edge浏览器兼容性问题 近期操作系统更新,公司好几台win10 系统的chrome edge浏览器出现错误提示:兼容性问题,并且扩展插件无法加载,任何页面都无法打开,包括开发者模式页面。 参考百度时,有网友提出是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,538
精华内容 10,215
关键字:

浏览器兼容性