最近一个朋友突然问起我盒模型的问题,和我起了分歧,说和XX书上写的不一样,我很奇怪试试就知道的东西,为什么就不愿相信事实呢。真是尽信书不如无书。
document有个属性compatMode,BackCompat(对应quirks mode),CSS1Compat(对应strict mode)。如果你头部不写doctype声明的话,一般默认为BackCompat。Presto内核(Opera)的浏览器我没有测试,哪位同学有空可以实验下。Gecko和Webkit内核的浏览器这2个模式是一致的。这就剩下老大难Trident同学了。
下面是我的理解,不负责任
Trident内核:
BackCompat下,width=内容宽度+border宽度+padding宽度
CSS1Compat下,width=内容宽度
不管哪个模式下,width也没有算margin的宽度。
我个人的经验是,给element设置width、height了,就不要指定他的border和padding了,反之亦然。