主页 > 知识库 > 各浏览器padding、margin的差异

各浏览器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负值的作用

标签:沧州 河南 新疆 乐山 上海 红河 长治 沈阳

巨人网络通讯声明:本文标题《各浏览器padding、margin的差异》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266