關于margin和padding的問題

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該寫法的浏覽器有幸讀到了這一句

}