各浏览器padding、margin的差异
margin和padding总是有可能要用到,而产生的问题如何解决呢?由于浏览器解释容器宽度的方法不同:
IE 6.0 Firefox Opera等是
真实宽度=width+padding+border+margin
IE5.X
真实宽度=width-padding-border-margin
解决的方法是:
div.content { 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)有幸读到了这一句
}
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该写法的浏览器有幸读到了这一句
}
小
上一篇: Java单例模式实例简述
推荐阅读
-
各浏览器padding、margin的差异
-
边框(border)边距(margin)和间隙(padding)属性的区别
-
attachEvent兼容各浏览器事件(DOM2级事件的兼容处理) 博客分类: 教学笔录学生提问笔记随笔JS前端积累 教学笔录学生提问笔记随笔JS前端积累
-
HTML CSS--margin和padding的学习_html/css_WEB-ITnose
-
setTimeout与setInterval在不同浏览器下的差异研究 博客分类: Javascript 浏览器IEJavaScriptVBScriptFirefox
-
setTimeout与setInterval在不同浏览器下的差异研究 博客分类: Javascript 浏览器IEJavaScriptVBScriptFirefox
-
各浏览器中querySelector和querySelectorAll的实现差异分析_jquery
-
CSS笔记padding,margin为百分比计算时的参照对象 - 青草圆
-
padding对于margin的影响简单介绍_html/css_WEB-ITnose
-
事件模型在各浏览器中存在差异_javascript技巧