• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    各浏览器padding、margin的差异

    margin和padding总是有可能要用到,而产生的问题如何解决呢?由于浏览器解释容器宽度的方法不同:
    IE 6.0 Firefox Opera等是
    真实宽度=width+padding+border+margin
    IE5.X
    真实宽度=width-padding-border-margin

    解决的方法是:

    div.content {
    width:400px; //这个是错误的width,所有浏览器都读到了
    voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容
    voice-family:inherit;
    width:300px; //包括IE6/win在内的部分浏览器读到这句,新的数值(300px)覆盖掉了旧的
    }
    html>body .content { //html>body是CSS2的写法
    width:300px; //支持CSS2该写法的浏览器(非IE5)有幸读到了这一句
    }

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


    您可能感兴趣的文章:
    • firefox margin-top失效的原因与解决办法
    • 用margin和overflow属性实现div间距的方法
    • jQuery获得包含margin的outerWidth和outerHeight的方法
    • Android中gravity、layout_gravity、padding、margin的区别小结
    • 用iframe margin实现调用其他网页的某一区域的方法
    • CSS的margin边界叠加深度剖析图文演示
    • 关于margin-left的示例代码
    • 简单谈谈margin负值的作用
    上一篇:IE 5.x/Win 和模型bug
    下一篇:IE浮动边界BUG延伸探讨
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    各浏览器padding、margin的差异 各,浏览器,padding,margin,的,