浏览器-兼容性

兼容性

web端 css

1. IE低版本图片默认有一个边框

   解决方法：添加border:none;属性，最好是在reset.css中添加此属性。

2. IE6/7不支持border:none

   一般浏览器都会支持的，但是如果非要兼容IE低版本，可以使用border:0，不存在兼容性问题；

3. IE8输入框的内容偏上显示

   这里如果设置line-height = height，IE下问题可以解决，但是safari中输入框的内容又偏上了。所以可以选择用IE的专属Hack也可以设置padding让其居中。

4. IE输入框后面自动添加一个叉号

   input:-ms-clear{
       display:none;
   }
   

5. IE6元素最低高度为19px

   设置低于19px的高度，会不生效，如果想小于这个高度，只能通过添加其它属性。

6. IE8及以下不支持nth-of-type/nth-child()

7. IE8不支持border-radius等属性

   关键属性设置 需要把路径设置好
   behavior: url(PIE.htc);

8. IE8不支持window.innerHeight

   可以通过document.body.clientHeight;获取，也可以通过jQuery的height()方法获取

   var h = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
   var h = $(window).height();
   

9. IE10以下不支持placeholder

   利用jQuery的插件jquery.placeholder.min.js实现，但是出来的效果，字体颜色是黑色的

   <script src="jquery.placeholder.min.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
       $(function(){
           $('input, textarea').placeholder();
       });
   </script>
   

10. IE、360不支持window.location.href自动下载服务端以文件格式返回的数据

    服务端把请求头的数据格式改成application/octet-stream就是直接以文件格式返回，在浏览器直接下载。但是ie、360中使用window.location.href就会直接去跳转页面了。

11. 不同浏览器对 解析不同

    尤其是搜狗，太狗了，差那么多！！给网页设置统一字体类型font-family即可

    font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    

12. 利用IE滤镜实现一些不支持的属性

    1. 实现rgba

    header{
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff,endColorstr=#7fffffff);
    }
    

    2. 实现opactiy

    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    

    3. 实现背景样式

    {
        background-image: url('a.jpg');
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='a.jpg',
        sizingMethod='scale');
    }
    
    

    图片的路径url和src必须一样，同时路径都必须是绝对路径，全路径，才可以，否则会出错

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

    img{border:none}

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

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

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

    解决方案:overflow设置为hidden

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

    min-height:200px; height:auto !important; height:200px; overflow:visible;

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

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

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

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

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

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

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

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

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

    -moz- gecko渲染引擎 firefox

    -ms- trident渲染引擎 IE

    -o- 　opeck渲染引擎　opera

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

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

web端 js

移动端 js

1. 移动端300ms延迟

   1. 移动端浏览器click事件为什么会有300ms的延迟呢？因为在手机上有个双击方案 —— 在手机上快速点击两下，实现页面放大；再次双击，恢复到原始比例。

      那它是如何实现的呢？浏览器在捕捉到第一次点击事件后，会等待一段时间，如果在这段时间内，用户没有再次进行点击操作的话，就执行单击事件；如果用户进行了第二次点击操作的话，就会执行双击事件。这段等待的时间大约300ms。

      width=device-width 宽度为设备宽度 initial-scale=1 初始比例为1 maximum-scale=1 最大比例为1 minimum-scale=1 最小比例为1 user-scalable=no 用户不能进行放大缩小

2. 1px像素问题

   1. 伪类 + transform 看代码：

   2. .border1
          height: .5rem
          position: relative
      .border1:before
          position: absolute
          top:-.5rem
          left:0
          content: ''
          100%
          height:1px
          border-top:1px solid rgba(0,0,0,.3)
          transform: scaleY(0.5)
      
      

   3. 这种方式的原理很简单，就是把原先元素的border去掉，然后利用:before或者:after重做border ，并transform的scale缩小一半，原先的元素相对定位，新做的border绝对定位。

移动端css