关于margin和padding的问题

最新推荐文章于 2022-09-20 11:12:40 发布

最新推荐文章于 2022-09-20 11:12:40 发布 · 128 阅读

文章标签：

#浏览器 #IE #Firefox #Opera #HTML

CSS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用 CSS Hack 来解决不同浏览器对 CSS 属性解释的差异性问题，特别是针对 IE5.X 和 IE6.0 等浏览器的兼容性问题。通过特殊的 CSS 语法，可以确保网页布局在多种浏览器中保持一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

IE 6.0 Firefox Opera等是
[color=red]真实宽度=width+padding+border+margin[/color]
IE5.X
[color=red]真实宽度=width-padding-border-margin[/color]

很明显，第一种下很完美的布局在第二种情况下后果是很凄惨的！

解决的方法是 [color=blue]hack[/color]

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该写法的浏览器有幸读到了这一句
}