原码笔记

原码笔记

前端兼容性问题总结(PC端)

小诸哥 0

1.如果图片加a标签在IE9-中会有边框

解决方案:

  1. img{border:none;}

2.rgba不支持IE8

解决方案:可以用 opacity

eg:

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

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

3. display:inline-block ie6/7不支持

解决方案:

  1. display:inline-block;
  2. *display:inline;

4.默认的body没有body去掉margin情况下ie5、6、7边缘会很宽margin-top加倍  如果处于无声明状态那么所有的ie浏览器margin-top加倍

解决方案:用css给body添加magin属性为0px

  1. body{margin:0;}

5.IE 6.0 Firefox Opera等是 真实宽度=width+padding+border

IE5.X 真实宽度=width

解决方案:

方法1.

  1. div.content {
  2.   width:400px; //这个是错误的width(对于ie5来说是正确的),所有浏览器都读到了
  3.   voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容
  4.   voice-family:inherit;
  5.   width:300px; //包括IE6/win在内的部分浏览器读到这句,新的数值(300px)覆盖掉了旧的
  6. } 

方法2.

  1. div.content {
  2.   width:300px !important; //这个是正确的width,大部分支持!important标记的浏览器使用这里的数值
  3.   width(空格)/**/:400px; //IE6/win不解析这句,所以IE6/win仍然认为width的值是300px;而IE5.X/win读到这句,新的数值(400px)覆盖掉了旧的,因为!important标记对他们不起作用
  4. }

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

解决方案:overflow设置为hidden

7.min-height不兼容  ie6 7解释为超过高度就撑开,而其他版本浏览器则遮盖下面的层

解决方案:min-height:200px; height:auto !important; height:200px; overflow:visible;

8.position:fixed  IE5、6无法识别此属性

解决方案:

  1. <!--[if lte IE 6]>
  2.    <style type="text/css">
  3.       html {
  4.         /*这个可以让IE6下滚动时无抖动*/
  5.         background: url(about:black) no-repeat fixed
  6.       }
  7.       #demo_t, #demo_b, #demo_l, #demo_r {
  8.         position: absolute;
  9.       }
  10.       #demo_t, #demo_b {
  11.         /*这个解决body有padding时,IE6下100%不能铺满的问题*/
  12.         width: _expression(offsetParent.clientWidth);
  13.       }
  14.       /*下面三组规则用于IE6下top计算*/
  15.       #demo_l, #demo_r {
  16.         top: _expression(offsetParent.scrollTop + 300);
  17.       }
  18.       #demo_t {
  19.         top: _expression(offsetParent.scrollTop);
  20.       }
  21.       #demo_b {
  22.         top: _expression(offsetParent.scrollTop + offsetParent.clientHeight-offsetHeight);
  23.       }
  24.   </style>
  25. <![endif]-->

9.浮动的div有margin_left属性ie6会加倍  无论兼容视图还是无声明视图

解决方案:

 方案一: IE6唯一识别属性_的方式加_display属性_display:inline;

 方案二:

  1.     条件注释<!--[if lte IE 6]>
  2.     <style>
  3.       .on{ display:inline }
  4.     </style>
  5.     <![endif]--&gt;

10.cursor兼容  自定义指针cur格式的图片url路径问题无论是兼容还是无声明版本

解决方案:cursor:url(Hand.cur), url(/Hand.cur), auto;

11.png图片  IE6里面的png图片不能透明 兼容版本和无声明版本都是

解决方案:

  1. <!--[if IE ]>
  2.    <style type="text/css">
  3.      #DIVname{
  4.         background:none;
  5.         filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="pngtouming.png"
  6.      }
  7.    </style>
  8. <![endif]-->

12.img浮动  img标签打回车会造成每个图片之间有缝隙

解决方案:可以删除之间的回车键也可以让这些图片浮动

13.在IE浏览器下 input type="text"文本框点击时后面会出现"X",以及type="password"后面会出现眼睛,如何除去这两种默认样式:

  1. ::-ms-clear,::-ms-reveal{display:none;}

注:IE9-不识别

14.CSS3前缀  -webkit-  webkit渲染引擎  chrome/safari

         -moz-   gecko渲染引擎   firefox

         -ms-    trident渲染引擎  IE

         -o-   opeck渲染引擎 opera    

动画、过渡、background-size 都需要加前缀

eg: 动画

  1.      @-webkit-keyframes name{
  2.     0%{动画开始的css样式;}
  3.     100%{动画结束的css样式;}
  4.  }
  5. -webkit-animation:name 8s infinite linear;

过渡:

  1. div.box{
  2.     bottom:-40px;<br>    -webkit-transition:all .3s ease-in-out 0s;
  3. }

注:但是过渡不兼容IE8-,可以用js动画实现

background-size 同样也不支持IE8,可以考虑用img

15.渐变

解决方案:

  1. filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#35FEA1,endColorStr=#6E9DFF); /*IE 6 7 8*/
  2.      background: -ms-linear-gradient(top, #35FEA1, #6E9DFF);/* IE 10 */
  3.      background:-moz-linear-gradient(top, #35FEA1, #6E9DFF); /*火狐*/
  4.      background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));/*谷歌*/
  5.      background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));/* Safari 4-5, Chrome 1-9*/
  6.      background: -webkit-linear-gradient(top, #35FEA1, #6E9DFF);/*Safari5.1 Chrome 10+*/
  7.      background: -o-linear-gradient(top, #35FEA1, #6E9DFF);/*Opera 11.10+*/

16.PIE.htc 可以实现很多css3属性在IE下的兼容性 如:圆角、阴影、渐变

(1) 圆角 border-radius

  1. .signBtn{
  2.      height: 40px;
  3.      background-color:#08BCD2;
  4.      color: #fff;
  5.      -webkit-border-radius: 3px;
  6.      -moz-border-radius: 3px;
  7.      border-radius: 3px;
  8.      behavior: url(css/PIE.htc);
  9. }

(2)阴影 box-shadow

  1. .box{
  2.   width:200px;
  3.   height:200px;
  4.   -webkit-box-shadow:1px 0 10px;
  5.   -moz-box-shadow:1px 0 10px;
  6.   box-shadow: 1px 0 10px;
  7.   background-color: #fff;
  8.   behavior: url(css/PIE.htc);/*IE边框阴影*/
  9. }

(3)背景透明rgba

  1. .box{
  2.    background-color:rgba(12, 154, 171, 0.29);
  3.      behavior: url(css/PIE.htc);
  4.      -pie-background:rgba(12, 154, 171, 0.29);
  5. }

(4)渐变

  1. .box{
  2.      width:200px;
  3.      height:400px;
  4.      background:-webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393));
  5.      background:-moz-linear-gradient(#9F9, #393);
  6.      -pie-background:linear-gradient(#9F9, #393);
  7.      behavior:url(pie.htc);
  8. }

注:PIE.htc文件路径相对是相对于css文件,并非html文件,以上例子是将PIE.htc文件放在与css样式文件同一个文件夹css内,而对应的html问价与css文件夹同级

17.JS实现点击跳转到指定位置

  1. $(".arraw-bt").click(function(){
  2.      var scroll_offset = $("#section").offset();
  3.          console.log(scroll_offset);
  4.          $("body,html").animate({//如果只写body,只被chrome支持 只被chrome支持 Firefox和ie不支持
  5.          "scrollTop":scroll_offset.top
  6.          },0);//此处0写上会一下跳转到指定位置,若不写会有过渡效果
  7.      /});

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

标签: 兼容性 前端