zoukankan      html  css  js  c++  java
  • 浏览器兼容问题及解决方案

    1.图片间隙

      A)div中的图片间隙(该bug出现在IE6以及更低版本当中)

      描述:在div中插入图片时,图片会将div下方撑大三像素

      hack1:将</div>和<img>写在一行上

      hack2:将<img>转化为块状元素,给<img>添加声明:display:block;

      B)dt,li中的图片间隙(IE6)

      hack1:将<img>转化为块状元素,给<img>添加声明:display:block;

      hack2:<img>设置对齐方式为vertical-align:top

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

      描述:当ie6及更低版本解决浮动元素时,会错误的把浮向边边界加倍显示

      hack:给浮动元素添加声明: display:inline

    3.默认高度(IE6)

      描述:在IE6及以下版本中,部分块元素拥有默认高度(低于16px高度)

      hack1:给元素添加声明:font-size:0

      hack2:给元素添加声明:overflow:hidden;

    4.表单元素行高不一致

      描述:表单元素行高对齐方式不一致

      hack:给表单元素添加声明:float:left或vertical-align:top

    5.百分比bug

      描述:在IE6及以下版本中在解析百分比时,会按照四舍五入的方式计算从而导致50%加50%大于100%的情况

      hack:给右边的元浮动元素添加1声明:clear:right;意思:清除右浮动,clear:left;clear:both

    6.透明写法

      opacity:0~1; IE8及以上浏览器

      fliter:alpha(opacity=1~100);IE9及IE9以下的浏览器

    7.列表阶梯bug(IE6及更低版本的浏览器当中)

      bug1:在给的子元素中使用了Float:left;父元素没有设置浮动属性,li阶梯效果

      hack:给父元素设置浮动

      bug2:当给LI里的A转成块元素,并设置了固定高度,且给父元素写了浮动后在IE6及更低版本中会出现垂直显示

    ·   hack:给a也设置浮动便可解决

    8.鼠标指针bug

      描述:cursor属性的head属性值只有IE浏览器能识别,其他浏览器不识别该声明,cursor属性的pointor属性值IE6.0以上版本及其他内核

          浏览器都识别该声明

      hack:如同意某元素指针鼠标形状为手型,添加声明:cursor:pointer

    9.浏览器解析边框按钮时,会把边框解析在按钮内部,不会影响按钮的原有大小

    10.Normalize.css

      不同浏览器的默认样式存在差距,可以使用Normalize.css抹平这些差异,当然你也肯定定制属于自己业务的reset.css

      <link href ="https://cdn.bootcss.com/noemalize/7.0.0/normalize.min.css" rel="stylesheet">

      简单粗暴法:*{margin:0;padding:0}

    11.html5shiv.js

      解决ie9及以下浏览器对html5新增标签不能识别的问题

    12.浏览器兼容前缀

      Opera:-o-

      IE:-ms

      Firedox:-moz-

      Chrome:-webkit-

    13.a标签的几种CSS状态的顺序

      有时候我们写好a标签会发现写的样式无效,或者点击超链接后,hover,active样式没有效果,其实知识写的样式被覆盖了

      正确的a标签顺序应该是 :==love  hate   ==  爱恨

      即.link .visited    .hover      .active

    14.BFC解决边距重叠问题

      .当相邻元素设置了margin边距时。margin将会取最大值,舍弃小值,为了不让边距重叠,可以给子元素加一个父元素,并设置该父元素为BFC:overflow:hidden(注意:BFC为块状格式化上下文)

    15.IE6双倍边距问题

      ie6中设置浮动,同时有设置margin,会出现双倍边距的问题

      hack:display:inline

    16.解决IE6不支持fixed绝对定位以及IE6以下被绝对定位的元素在滚动时会闪动的问题

      hack:html,html body{

        background-images:url(about:blank);

        background-attachment:fixed;}

        html #menu{

        position:absolute;

        top:expression((e=document.doucumentElement.scrollTop)?e.document.body.scrollTop)+100+'px')}

    17.解决IE6不支持min-height兼容性写法

      min-height:350px;

      _height:350px;

    今天早上突发奇想看了看浏览器的兼容问题,发现我竟然全忘光了,血惨,赶紧整篇博客记一下子,感觉提前步入老年痴呆生活了

        

  • 相关阅读:
    lincode 题目记录5
    lintcode题目记录4
    lintcode 题目记录3
    lintcode 题目记录2
    剖析ASP.NET Core(Part 2)- AddMvc(译)
    剖析ASP.NET Core MVC(Part 1)- AddMvcCore(译)
    如何 RESTFul 你的服务(译)
    Windows + IIS 环境部署Asp.Net Core App
    Asp.Net Core 缓存的使用(译)
    [转载].NET Core 轻量级模板引擎 Mustachio
  • 原文地址:https://www.cnblogs.com/suihang/p/9986946.html
Copyright © 2011-2022 走看看