浏览器-兼容性

兼容性

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);
    }
    
    1. 实现opactiy
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    
    1. 实现背景样式
    {
        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加倍

    解决方案:用cssbody添加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: ''
          width:100%
          height:1px
          border-top:1px solid rgba(0,0,0,.3)
          transform: scaleY(0.5)
      
      
    3. 这种方式的原理很简单,就是把原先元素的border去掉,然后利用:before或者:after重做border ,并transformscale缩小一半,原先的元素相对定位,新做的border绝对定位。

移动端css

上一篇:[转]五大主流浏览器及四大内核


下一篇:华为HCIE实验考试险过,考试真题分享、答题经验分享