精华内容
参与话题
问答
  • 常见浏览器兼容性问题与解决方案

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

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

    在学习浏览器兼容性之前,我想把前端开发人员划分为两类:

    第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览器的bug,并且他们制作的页面后期易维护,代码重用问题少,可以说是比较牢固放心的代码。

    第二类是基本按照设计图来开发的前端开发人员,很多细枝末节差距很大,不如间距,行高,图片位置等等经常会差几px。某种效果的实现也是反复调试得到,具体为什么出现这种效果还模模糊糊,整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器,而是他们的技术本身了。

    文章主要针对的是第一类,严谨型的开发人员,因此这里主要从浏览器解析差异的角度来分析兼容性问题。(相关文章推荐:主流浏览器CSS 3和HTML 5兼容清单

    浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同

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

    碰到频率:100%

    解决方案:CSS里    *{margin:0;padding:0;}

    备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

    浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大

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

    碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)

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

    备注:我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。

    浏览器兼容问题三:设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度

    问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度

    碰到频率:60%

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

    备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

    浏览器兼容问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug

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

    碰到几率:20%

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

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

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

    问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。

    碰到几率:20%

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

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

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

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

    碰到几率:5%

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

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

    浏览器兼容问题七:透明度的兼容CSS设置

    做兼容页面的方法是:每写一小段代码(布局中的一行或者一块)我们都要在不同的浏览器中看是否兼容,当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的,只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话,就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

    1. /* CSS hack*/ 

    我很少使用hacker的,可能是个人习惯吧,我不喜欢写的代码IE不兼容,然后用hack来解决。不过hacker还是非常好用的。使用hacker我可以把浏览器分为3类:IE6 ;IE7和遨游;其他(IE8 chrome ff safari opera等)

    ◆IE6认识的hacker 是下划线_ 和星号 *

    ◆IE7 遨游认识的hacker是星号 *

    比如这样一个CSS设置:

    1. height:300px;*height:200px;_height:100px; 

    IE6浏览器在读到height:300px的时候会认为高时300px;继续往下读,他也认识*heihgt, 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置,认为高度是200px。继续往下读,IE6还认识_height,所以他又会覆盖掉200px高的设置,把高度设置为100px;

    IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了,因为它们不认识_height。所以它们会把高度解析为200px,剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个,所以书写的次序是很重要的。


    展开全文
  • 兼容

    2017-12-01 09:09:45
    本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧,供大家参考。  CSS兼容常用技巧  请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明。  1.div的垂直居中问题 ...

    本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧,供大家参考。

      CSS兼容常用技巧

      请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明。

      1.div的垂直居中问题

      vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 http://www.php100.com

      2. margin加倍的问题

      设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

      例如:

    [css] view plain copy
    1. #imfloat{  
    2. float:left;  
    3. margin:5px;  
    4. display:inline;}  

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

    [css] view plain copy
    1. #boxfloat:leftwidth:100pxmargin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}  

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

    [css] view plain copy
    1. #boxdisplay:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;}<span style="margin: 0px; padding: 25px 0px 0px; display: block; word-break: break-all; "></span>  

      4 IE与CSS宽度和CSS高度的问题div css技巧

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

      比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:

    [css] view plain copy
    1. #boxwidth80pxheight35px;}html>body #boxwidthautoheightautomin-width80pxmin-height35px;}  

      5.页面的最小宽度

      min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个<div> 放到<body> 标签下,然后为div指定一个类,然后CSS这样设计:http://www.php100.com

    [css] view plain copy
    1. #container{ min-width600pxwidth:expression_r(document.body.clientWidth < 600"600px""auto" );}  

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

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

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

      

    [css] view plain copy
    1. #boxfloat:leftwidth:800px;}  
    2.   #leftfloat:leftwidth:50%;}  
    3.   #rightwidth:50%;}  
    4.   *html #leftmargin-right:-3px; //这句是关键}  

    [html] view plain copy
    1. <div id="box">  
    2.   <div id="left"></div>  
    3.   <div id="right"></div>  
    4.   </div>  

      7.IE捉迷藏的问题

      当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。

      有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。解决办法:对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。http://www.php100.com


    8.float的div闭合;清除浮动;自适应高度

      ①例如:<#div id=”floatA” ><#div id=”floatB” ><#div id=”NOTfloatC” >这里的NOTfloatC并不希望继续平移,而是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)

      这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 <#div class=”clear”>这个div一定要注意位置,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。并且将clear这种样式定义为为如下即可: .clear{ clear:both;}

      ②作为外部 wrapper 的 div 不要定死高度,div css制作为了让高度能自动适应,要在wrapper里面加上overflow:hidden; 当包含float的box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。
      例如某一个wrapper如下定义:

    [css] view plain copy
    1. .colwrapper{ overflow:hidden; zoom:1margin:5px auto;}  

      ③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:

    [html] view plain copy
    1. <div id=”page”>  
    2.   <div id=”left”></div>  
    3.   <div id=”center”></div>  
    4.   <div id=”right”></div>  
    5.   </div>  

      比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而page居然保存高度不变,问题来了css 制作,原因在于page不是float属性,而我们的page由于要居中,不能设置成 float,所以我们应该这样解决

    [html] view plain copy
    1. <div id=”page”>  
    2.   <div id=”bg” style=”float:left;width:100%”>  
    3.   <div id=”left”></div>  
    4.   <div id=”center”></div>  
    5.   <div id=”right”></div>  
    6.   </div>  
    7.   </div>  

      再嵌入一个float left而宽度是100%的DIV解决之道。


      ④万能float 闭合(非常重要!)

      关于 clear CSS float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.

      

    [css] view plain copy
    1. .clearfix:after { content:"."display:blockheight:0clear:bothvisibility:hidden; }  
    2.   .clearfix { display:inline-block; }  
    3.     
    4.   .clearfix {display:block;}  

      或者这设置:

    [css] view plain copy
    1. .hackbox{ display:table; //将对象作为块元素级的表格显示}  

      9.高度不能自适应

      高度不能自适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或paddign 时。

      例:

    [css] view plain copy
    1. #box {background-color:#eee; }  
    2.  #box p {margin-top20px;margin-bottom20pxtext-align:center; }  

    [html] view plain copy
    1. <div id="box">  
    2.   <p>p对象中的内容</p>  
    3.   </div>  

      解决技巧:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

      10 .div+css之IE6下为什么图片下有空隙产生

      解决这个BUG的技巧也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top  

      bottom  middle  text-bottom 都可以解决.

      11.如何对齐文本与文本输入框

      加上 vertical-align:middle;

      <style type="text/css">
      <!--
      input {
      width:200px;
      height:30px;
      border:1px solid red;
      vertical-align:middle;
      }
      -->
      </style>

      12.web标准中定义id与class区别吗

      (1).web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而CSS class定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.

      (2).属性的优先级问题

      CSS ID的优先级要高于class,看上面的例子

      (3).方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单。

    13. LI中内容超过长度后以省略号显示的技巧

      此技巧适用与IE与OP浏览器

      <style type="text/css">
      <!--
      li {
      width:200px;
      white-space:nowrap;
      text-overflow:ellipsis;
      -o-text-overflow:ellipsis;
      overflow: hidden;
      }

      -->
      </style>

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

      解决办法是将body换成html

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <style type="text/css">
    <!--

      html {
      scrollbar-face-color:#f6f6f6;
      scrollbar-highlight-color:#fff;
      scrollbar-shadow-color:#eeeeee;
      scrollbar-3dlight-color:#eeeeee;
      scrollbar-arrow-color:#000;
      scrollbar-track-color:#fff;
      scrollbar-darkshadow-color:#fff;
      }
      -->
      </style>

      15.为什么无法定义1px左右高度的容器

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

      16.怎么样才能让层显示在FLASH之上呢

      解决的办法是给FLASH设置透明

      <param name="wmode" value="transparent" />

      17.怎样使一个层垂直居中于浏览器中

      这里我们使用百分比绝对定位,与外补丁负值的技巧,负值的大小为其自身宽度高度除以二

      <style type="text/css">
      <!--
      div {
      position:absolute;
      top:50%;
      lef:50%;
      margin:-100px 0 0 -100px;
      width:200px;
      height:200px;
      border:1px solid red;
      }
      -->
      </style>


    Firefox与IE的CSS兼容CSS HACK技巧

      1. Div居中问题

      div设置 margin-left, margin-right 为 auto 时已经居中,IE 不行,IE需要设定body居中,首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。

      2.CSS 链接(a标签)的边框与背景

      a链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

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

      被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A

      Code:

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

      4. 游标手指cursor

      cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以

      5.UL的padding与margin

      ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题

      6. FORM标签

      这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后面就不会为这个头疼了.

      7. BOX模型解释不一致问题

      在FF和IE中的BOX模型解释不一致导致相差2px解决技巧:div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反, important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:

      div{maring:30px;margin:28px}重复定义的话按照最后一个来执行,所以不可以只写margin:xx px!important;#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
      #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width :500px; //for ie6.0-}

      8.属性选择器(这个不能算是兼容,是隐藏css的一个bug)

      p[id]{}div[id]{}

      这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

      9.最狠的手段 - !important

      如果实在没有办法解决一些细节问题,可以用这个技巧.FF对于”!important”会自动优先解析,然而IE则会忽略.如下

      .tabd1{
      background:url(http://www.php100.com/res/images/up/tab1.gif) no-repeat 0px 0px !important;
      background:url(http://www.php100.com /res/images/up/tab1.gif) no-repeat 1px 0px; }

      值得注意的是,一定要将xxxx !important 这句放置在另一句之上。

      10.IE,FF的默认值问题

      或许你一直在抱怨为什么要专门为IE和FF写不同的CSS,为什么IE这样让人头疼,然后一边写css,一边咒骂那个可恶的M$ IE.其实对于css的标准支持方面,IE并没有我们想象的那么可恶,关键在于IE和FF的默认值不一样而已,掌握了这个技巧,你会发现写出兼容FF和 IE的css并不是那么困难,或许对于简单的css,你完全可以不用”!important”这个东西了。

      我们都知道,浏览器在显示网页的时候,都会根据网页的css样式表来决定如何显示,但是我们在样式表中未必会将所有的元素都进行了具体的描述,当然也没有必要那么做,所以对于那些没有描述的属性,浏览器将采用内置默认的方式来进行显示,譬如文字,如果你没有在css中指定颜色,那么浏览器将采用黑色或者系统颜色来显示,div或者其他元素的背景,如果在css中没有被指定,浏览器则将其设置为白色或者透明,等等其他未定义的样式均如此。所以有很多东西出现 FF和IE显示不一样的根本原因在于它们的默认显示不一样,而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定,因此对于这点也就别去怪罪IE了。

      11.为什么FF下文本无法撑开容器的高度

      标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min- height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:

      {
      height:auto!important;
      height:200px;
      min-height:200px;
      }

    12.FireFox下如何使连续长字段自动换行

      众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入
      的技巧来解决

      <style type="text/css">
      <!--
      div {
      width:300px;
      word-wrap:break-word;
      border:1px solid red;
      }
      -->
      </style>

      <div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

      <scrīpt type="text/javascrīpt">
      
      function toBreakWord(el, intLen){
      var ōbj=document.getElementByIdx_x_xx_x_x(el);
      var strContent=obj.innerHTML;
      var strTemp="";
      while(strContent.length>intLen){
      strTemp+=strContent.substr(0,intLen)+"
      ";
      strContent=strContent.substr(intLen,strContent.length);
      }
      strTemp+="
      "+strContent;
      obj.innerHTML=strTemp;
      }
      if(document.getElementByIdx_x_xx_x_x && !document.all) toBreakWord("ff", 37);
      
      </scrīpt>


      13.为什么IE6下容器的宽度和FF解释不同?

      问题的差别在于容器的整体宽度有没有将边框(border)的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢?大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode。

      <?xml version="1.0" encoding="gb2312"?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
      <style type="text/css">
      <!--
      div {
      cursor:pointer;
      width:200px;
      height:200px;
      border:10px solid red
      }
      -->
      </style>
      <div ōnclick="alert(this.offsetWidth)">让FireFox与IE兼容</div>

      IE7.0对CSS的支持又有新问题,解决如下。

      第一种,CSS HACK

      Bpx;
      _height:20px;

      注意顺序。

      下面这样也属于div CSS HACK,不过没有上面这样简洁。

      #example { color: #333; }
      * html #example { color: #666; }
      *+html #example { color: #999; }

      第二种,是使用IE专用的条件CSS注释

      <!--其他浏览器 -->
      <link rel="stylesheet" type="text/css" href="css.css" />

      <!--[if IE 7]>
      <!-- 适合于IE7 -->
      <link rel="stylesheet" type="text/css" href="ie7.css" />
      <![endif]-->

      <!--[if lte IE 6]>
      <!-- 适合于IE6及一下 -->
      <link rel="stylesheet" type="text/css" href="ie.css" />
      <![endif]-->

      第三种,css filter的办法,以下是从国外网站翻译过来的。

      新建一个css样式如下:

      #item {
      width: 200px;
      height: 200px;
      background: red;
      }

      新建一个div,并使用前面定义的css的样式:

      <div id="item">some text here</div>

      在body表现这里加入lang属性,中文为zh:

      <body lang="en">

      现在对div元素再定义一个样式:

      *:lang(en) #item{
      background:green !important;
      }

    展开全文
  • 兼容

    2017-12-13 10:28:20
    接触DIV+CSS架构已经快两年了,个人觉得css入门不难,但要学精并非一朝一夕的,现在大部分网络公司都比较主张用div+css来布局,这就面临着一个比较难的问题——浏览器的兼容性。 下面整理了一下相关的兼容问题,...

    接触DIV+CSS架构已经快两年了,个人觉得css入门不难,但要学精并非一朝一夕的,现在大部分网络公司都比较主张用div+css来布局,这就面临着一个比较难的问题——浏览器的兼容性。
    下面整理了一下相关的兼容问题,希望大家再在其基础上补充!
    所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)
    height: 100px;

    IE6 专用
    _height: 100px;

    IE6 专用
    *height: 100px;

    IE7 专用
    *+height: 100px;

    IE7、FF 共用
    height: 100px !important;
    一、CSS 兼容
    以下两种方法几乎能解决现今所有兼容.

    1, !important (不是很推荐,用下面的一种感觉最安全)

    随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)

    代码:
    <style>
    #wrapper {
    width: 100px!important; /* IE7+FF */
    width: 80px; /* IE6 */
    }
    </style>

    2, IE6/IE77对FireFox <from 针对firefox ie6 ie7的css样式>

    *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.

    代码:
    <style>
    #wrapper { width: 120px; } /* FireFox */
    *html #wrapper { width: 80px;} /* ie6 fixed */
    *+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
    </style>

    注意:
    *+html 对IE7的兼容 必须保证HTML顶部有如下声明:

    代码:
    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd“>

    二、万能 float 闭合(非常重要!) 可以用这个解决多个div对齐时的间距不对,

    关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
    将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.

    代码:
    <style>
    /* Clear Fix */
    .clearfix:after {
    content:”.”;
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }
    .clearfix {
    display:inline-block;
    }
    /* Hide from IE Mac */
    .clearfix {display:block;}
    /* End hide from IE Mac */
    /* end of clearfix */
    </style>

    三、其他兼容技巧(相当有用)

    1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
    2, 居中问题.
    1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vetical-align: middle.( 注意内容不要换行.)
    2).水平居中. margin: 0 auto;(当然不是万能)
    3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
    4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
    5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
    6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
    7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.贴上代码:
    8、IE6 的双倍边距 BUG
        <style type=”text/css”> 
            body {margin:0} 
            div { float:left; margin-left:10px; ; height:200px; border:1px solid red } 
        </style>
       浮动后本来外边距10px, 但IE 解释为20px, 解决办法是加上 display:inline
    9、为什么FF 下文本无法撑开容器的高度?
      标准浏览器中固定高度值的容器是不会象IE6 里那样被撑开的, 那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height 设      置min-height:200px; 这里为了照顾不认识min-height 的IE6 可以这样定义:
       div { height:auto!important; height:200px; min-height:200px; }
    兼容代码:兼容最推荐的模式。
    /* FF */
    .submitbutton {
    float:left;
    width: 40px;
    height: 57px;
    margin-top: 24px;
    margin-right: 12px;
    }
    /* IE6 */
    *html .submitbutton {
    margin-top: 21px;
    }
    /* IE7 */
    *+html .submitbutton {
    margin-top: 21px;
    }
    什么是浏览器兼容:当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,有的显示出来正常,有的显示出来不正常,我们在编写CSS的时候会很恼火,刚修复了这个浏览器的问题,结果另外一个浏览器却出了新问题。而兼容就是一种办法,能让你在一个CSS里面独立的写支持不同浏览器的样式。这下就和谐了。呵呵!
    程序代码

    第一个兼容,IE FF 所有浏览器 公用(其实也不算是兼容)
    height:100px;
    第二个兼容 IE6专用
    _height:100px;
    第三个兼容 IE6 IE7公用
    *height:100px;
    height:100px;
    *height:120px;
    _height:150px;

    在FF下,第2、3个属性FF不认识,所以它读的是 height:100px;

    在IE7下,第三个属性IE7不认识,所以它读第1、2个属性,又因为第二个属性覆盖了第一个属性,所以IE7最终读出的是第2个属性 *height:120px;

    在IE6下,三个属性IE6都认识,所以三个属性都可以读取,又因为第三个属性覆盖掉前2个属性,所以IE6最终读取的是第三个属性。

    1 针对firefox ie6 ie7的css样式

    现在大部分都是用!important来兼容,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的兼容方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了现在写一个CSS可以这样:

    #1 { color: #333; } /* Moz */
    * html #1 { color: #666; } /* IE6 */
    *+html #1 { color: #999; } /* IE*/

    那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。

    2 css布局中的居中问题

    主要的样式定义如下:

    body {TEXT-ALIGN: center;}
    #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

    说明:

    首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。

    但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

    需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

    3 盒模型不同解释.

    #box{
    width:600px;
    //for ie6.0- width:500px;
    //for ff+ie6.0
    }
    #box{
    width:600px!important
    //for ff
    width:600px;
    //for ff+ie6.0
    width /**/:500px;
    //for ie6.0-
    }

    4 浮动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;

    5 IE与宽度和高度的问题

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

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

    6 页面的最小宽度

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

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

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

    7 清除浮动

    .兼容box{
    display:table;
    //将对象作为块元素级的表格显示
    }

    或者

    .兼容box{
    clear:both;
    }

    或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,所以并不影响到IE/WIN浏览器。这种的最麻烦的

    ……#box:after{
    content: “.”;
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

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

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

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

    9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

    p[id]{}div[id]{}
    p[id]{}div[id]{}

    这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

    属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

    10 IE捉迷藏的问题

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

    11 高度不适应

    高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用
    margin 或paddign 时。例:

    <div id=”box”>
    <p>p对象中的内容</p>
    </div>

    CSS:

    #box {background-color:#eee; }
    #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

    解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

    屏蔽IE浏览器(也就是IE下不显示)
    *:lang(zh) select {font:12px !important;} /*FF,OP可见*/
    select:empty {font:12px !important;} /*safari可见*/
    这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。

    仅IE7识别
    *+html {…}
    当面临需要只针对IE7做样式的时候就可以采用这个兼容。

    IE6及IE6以下识别
    * html {…}
    这个地方要特别注意很多地主都写了是IE6的兼容其实IE5.x同样可以识别这个兼容。其它浏览器不识别。
    html/**/ &gt;body select {……}
    这句与上一句的作用相同。

    仅IE6不识别
    select { display /*IE6不识别*/:none;}
    这里主要是通过CSS注释分开一个属性与值,流释在冒号前。

    仅IE6与IE5不识别
    select/**/ { display /*IE6,IE5不识别*/:none;}
    这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。

    仅IE5不识别
    select/*IE5不识别*/ { display:none;}
    这一句是在上一句中去掉了属性区的注释。只有IE5不识别

    盒模型解决方法
    selct {width:IE5.x宽度; voice-family :”"}”"; voice-family:inherit; width:正确宽度;}
    盒模型的清除方法不是通过!important来处理的。这点要明确。

    清除浮动
    select:after {content:”.”; display:block; height:0; clear:both; visibility:hidden;}
    在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的兼容来对父级做一次定义,那么就可以解决这个问题 。

    截字省略号
    select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
    这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。

    只有Opera识别
    @media all and (min-width: 0px){ select {……} }
    针对Opera浏览器做单独的设定。

    以上都是写CSS中的一些兼容,建议遵循正确的标签嵌套(div ul li 嵌套结构关系),这样可以减少你使用兼容的频率,不要进入理解误区,并不是一个页面就需要很多的兼容来保持多浏览器兼容),很多情况下也许一个兼容都不用也可以让浏览器工作得非常好,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在 CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

    IE5.x的过滤器,只有IE5.x可见
    @media tty {
    i{content:”";/*” “*/}} @import ’ie5win.css’; /*”;}
    }/* */

    IE5/MAC的过滤器,一般用不着
    /**//*/
    @import “ie5mac.css”;
    /**/

    IE的if条件兼容 自己可以灵活使用参看这篇IE条件注释
    Only IE
    所有的IE可识别

    只有IE5.0可以识别
    Only IE 5.0+
    IE5.0包换IE5.5都可以识别

    仅IE6可识别
    Only IE 7/-
    IE6以及IE6以下的IE5.x都可识别
    Only IE 7/-
    仅IE7可识别

    Css 当中有许多的东西不不按照某些规律来的话,会让你很心烦,虽然你可以通过很多的兼容,很多的!important 来控制它,但是你会发现长此以往你会很不甘心,看看许多优秀的网站,他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起来完美无缺是不是很羡慕?而他们看似复杂的模版下面使用的兼容 少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐,我们找到一定的方法,是完全可以让他们和谐共处的。不要你认为发现了兼容的办法,你就掌握了一切,我们并不是兼容的奴隶。

    div ul li 的嵌套顺序

    具体嵌套写法

    遵循上面得嵌套方式,<div><ul><li></li></ul>< /div> 然后在CSS 里面告诉 ul {Margin:0px;Padding:0px;list-style:none;},其中list-style:none是不让<li> 标记的最前方显示圆点或者数字等目录类型的标记,因为IE和Firefox显示出来默认效果有些不一样。因此这样不需要做任何手脚,你的IE6、和 IE7、Firefox显示出来的东西(外距,间距,高度,宽度)就几乎没什么区别了,也许细心的你会在某一个时刻发现一、两个象素的差别,但那已经很完美了,不需要你通过调整大片的CSS来控制它们的显示了,你愿意,你可以仅仅兼容一两个地方,而且通常这种兼容可以适应各种地方,不需要你重复在不同的地方调试不同的兼容方式–减轻你的烦。你可以ul.class1, ul.class2, ul.class3 {xxx:xxxx}的方式方便的整理出你要兼容的地方,而统一兼容。尝试一下吧,再也不要乱嵌套了,虽然在Div+CSS的方式下你几乎可以想怎么嵌套就怎么嵌套,但是按照上面的规律你将轻松很多,从而事半功倍!

    展开全文
  • 兼容

    2019-08-11 19:44:54
    兼容 来因 由于各大主流浏览器由不同的厂家开发,所用的核心架构和代码也很难重和,这就为各种莫名其妙的Bug(代码错误)提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒,都让CSS应用起来比想象得...

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

    Trident (MSHTML,IE核心) IE浏览器 (三叉戟;三叉线;三齿鱼叉)
    Gecko (壁虎) 火狐
    Presto ( 迅速的) 欧朋
    Webkit (急速) 谷歌 、苹果
    Blink (急速) 欧朋、谷歌
    CSS Bug、CSS Hack和Filter

    (1)CSS Bug:CSS样式在各浏览器中解析不一致的情况,或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.
    (2)CSS Hack: CSS中,Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法,它们都属于个人对CSS代码的非官方的修改,或非官方的补丁, 有些人更喜欢使用patch(补丁)来描述这种行为。 css hack的弊端:会增加一些css代码,从而增加浏览器负担
    (3)Filter:表示过滤器的意思,它是一种对特定的浏览器或浏览器组显示或隐藏规则和声明的方法。本质上讲,Filter是一种用来过滤不同浏览器的Hack类型。
    IE6常见CSS解析Bug及hack

    1)默认高度(IE6)
    描述:在IE6及以下版本中,部分块元素拥有默认高度(在16px左右);
    hack1:给元素添加声明:font-size:0;
    hack2:给元素添加声明:overflow:hidden;

    2)加了超链接的图片有边框BUG (IE浏览器)
    当图片加在IE上会出现边框
    Hack:给图片加border:0;或者border:none;

    3)图片间隙
    div,dt,li等中图片间隙中的图片间隙BUG
    描述:在div中插入图片时,图片会将div下方撑大大约三像素。
    hack1:将与写在一行上; ie6
    hack2:将转为块状元素,给添加声明:display:block;
    hack3:给图片添加vertical-align:top/middle/bottom.
    4) 双倍浮向(双倍边距)(只有IE6出现)
    描述:当Ie6及更低版本浏览器在解析浮动元素时,会错误地把浮向边边界(margin)加倍显示。
    hack:给浮动元素添加声明:display:inline;
    5)表单元素行高对齐不一致
    描述:表单元素行高对齐方式不一致
    hack:给表单元素添加声明:float:left;
    hack2:给input改变垂直对齐方式 ,添加 vertical-align:top/middle/bottom.

    6)按钮元素默认大小不一
    描述:各浏览器中按钮元素大小不一致
    hack1: 统一大小/(用a标记模拟)
    hack2:input外边套一个标签,在这个标签里写按钮的样式,把input的边框去掉。
    hack3:如果这个按钮是一个图片,直接把图片作为按钮的背景图即可

    7)百分比bug
    描述:在IE7及以下版本中在解析百分比时,会按四舍五入方式计算从而导致50%加50%大于100%的情况。
    (也会受系统影响)
    hack: 给右面的浮动元素添加声明:clear:right; 意思:清除右浮动。

    8)鼠标指针bug
    描述:cursor属性的hand属性值只有IE9以下浏览器识别,其它浏览器不识别该声明,cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。

    hack: 如统一某元素鼠标指针形状为手型,应添加声明:cursor:pointer;
    cursor: ;

    auto默认
    hand 手形
    crosshair加号
    text文本
    wait等待
    help帮助
    progress过程
    inherit继承
    move移动
    ne-resize向上或向右移动
    pointer手形

    9)透明属性
    兼容其他浏览器写法:opacity:value;(value的取值范围0-1;
    例:opacity:0.5;)
    IE浏览器写法:filter:alpha(opacity=value);取值范围 0-100(整数)

    10)li列表的BUG
    1):当父元素(li) 有float:left;子元素(a) 没设置浮动的情况下会出现垂直bug;
    Hack:给父元素li和子元素a都设置浮动;
    2):当给li中的a转成block;并且有height,并有float的时候,li中没设置浮动会出现阶梯显示,
    hack:同时给li加float;
    11)当li里a、span 分别添加左右浮动时,并且li设置高度后,IE7及以下浏览器会出现 li下方多出3像素左右的空隙;
    hack:给li添加float:left;和width:100%;

    12)当前元素(父元素里面第一个子元素并且是块状元素)与父元素没有设置任何浮动的情况下,设置margin-top后,会错误的把margin-top加在父级元素上。
    Css hack:
    1、给父级元素添加overflow:hidden;(推荐使用)
    2、给父元素或者子元素加浮动
    3、当父元素有边框时,可以直接给子元素添加margin-top值;

    13)margin BUG
    当两个上下排列的元素,上元素有margin-bottom:30px;下面元素有margin-top:20px;他们中间的距离不会相加,而是会设置为较大的值;
    过滤器(filter)

    1) _下划线属性过滤器
    当一个属性前面增加了一个下划线后,由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明,但是在IE6及以下版本浏览器中会继续解析这个规则;
    语法:选择器{ _ 属性:属性值;}
    2)"*","+"过滤器
    a:过滤ie7及以下浏览器
    语法:选择器{ *属性:属性值;}

    展开全文
  • 常见浏览器兼容性问题与解决方案  所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站...
  • HTML兼容问题小结

    千次阅读 2016-04-29 18:52:15
    标准浏览器子元素不会撑开父元素设置好的宽度,IE6下会的; .box{ width:400px;} .left{ width:200px;height:300px;background:red;float:left;} .right{ width:200px;float:right;} ...padding:15
  • 移动端 1. IOS移动端click事件300ms的延迟响应 ...这是由于区分单击事件和双击屏幕缩放的历史原因造成的, 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,...
  • 背景 近日,由于博主的笔记本电脑过于卡顿,升级了128GB的固态硬盘到512GB,重装系统后也需要重装生产力工具——Adobe系列全家桶。 2019年10月,Adobe发布了最新的Adobe Premiere Pro 2020以及其他系列的最新版本...
  • 在启用了Credential Guard或Device Guard的Windows 10主机上启动12.5版之前的VMware Workstation中的...VMware Workstation和Device / Credential Guard不兼容。禁用Device / Credential Guard后,可以运行VMwar...
  • vue cli3 兼容ie8以上浏览器

    万次阅读 2019-11-28 17:49:42
    1当我们使用 vue-cli3 搭建的脚手架开发项目时,一般浏览器都可以支持,唯独ie浏览器,运行时页面一片空白 首先,下载 babel-polyfill 模块 npm install babel-polyfill -s 2 配置 polyfill,在根目录下新增babel....
  • 浏览器兼容性解决之道 前言 浏览器兼容性一直是前端开发中不得不面对的一个问题。而最突出的就是IE。对绝大多数公司来说,兼容IE6的性价比已经很低,而IE7则几乎已经绝迹。所以,常见的兼容性下限是IE8。这也正是...
  • 为什么会有兼容问题?由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要...
  • 移动兼容测试

    千次阅读 2017-07-23 12:21:55
    移动兼容测试 这篇文章从5W1H 的角度来讲讲移动兼容测试。 WHAT 什么是兼容测试 兼容测试(Compatibility Test Suite ),简称CTS,业界的定义是指:测试软件在特定的硬件平台上、不同的应用软件之间、不同的操作...
  • webpack4 兼容老项目中的 require.js

    万次阅读 2019-08-05 20:57:33
    项目使用 require.js 进行模块化编程,并使用 gulp-requirejs-optimize 打包js文件,打包性能并不是很好。 require.js 使用 AMD 语法,webpack同样支持AMD语法,迁移成本较低,因此将 gulp 迁移至 webpack 4.38.0。...
  • 简要辨析向下兼容、向上兼容、向前兼容、向后兼容四个概念之间的关联与联系。简言之,向上兼容等同于作向前兼容,向下兼容等同于向后兼容。主流使用的是向前兼容和向后兼容。向后兼容中“后”指“落后”,站在新版本...
  • 最全整理浏览器兼容性问题与解决方案

    万次阅读 多人点赞 2018-02-26 11:44:36
    常见浏览器兼容性问题与解决方案 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站...
  • 文章目录系统测试概述功能测试性能测试负载测试压力测试性能测试、压力测试、负载测试的关系兼容性测试安全测试健壮性测试配置测试可用性测试文档测试 系统测试概述 系统测试的定义 将已经集成好的软件系统,作为...
  • 图文解决详细步骤。 结合文中参考步骤和留言区其他小伙伴的相关反馈进行操作。 如果您的问题得到解决或者有其他的疑问,欢迎留言交流,以便帮助更多的小伙伴解决问题时以作参考。谢谢。
  • 如何解决微信与此ipad不兼容

    万次阅读 2019-09-03 08:00:55
    如何解决微信与此ipad不兼容 如何解决微信与此ipad mini不兼容 尝试过很多方法,用pp助手和爱思助手安装以前版本 都不行,显示版本过低,需要升级, 但一升级,显示不兼容。 折磨了十分钟后, 最后这个方法搞定了: ...
  • 向下兼容、向上兼容、向前兼容、向后兼容 2017年06月02日 17:29:18 阅读数:2750 摘要: 简要辨析向下兼容、向上兼容、向前兼容、向后兼容四个概念之间的关联与联系。简言之,向上兼容等同于作向前兼容,向下...

空空如也

1 2 3 4 5 ... 20
收藏数 1,414,403
精华内容 565,761
关键字:

兼容