width|height到底定义什么？
URL：http://blog.iyi.cn/start/2005/04/widthheight.html
昨天写了《网页设计何去何从》这篇文章，反响不小^^，同时各位提醒了我去寻找解决方法，原来还是我自己认识的错误。今天重新整理一下，把能解决的问题解决一下，同时还测试了最新的Opera8。
首先是百分比问题，看下面这个网页：
这是一个html页面,宽度100%,ie下面没有任何问题，但是firefox跟Opera8下面就出现了滚动条了，问题是css中一个padding:10px;造成的,ff把padding向外扩展了，而ie是向内收缩的。
再看这个网页：
只是把上面那个网页转换成了xhtml，ie下面也出现了滚动条了。
不知道这是不是浏览器设计上的错误，但就我的理解width定义的宽度应该是最外宽度，padding应该是向内收敛。我也找到了替代方法:用max-width替代width，看下面的网页：
但是无论把max-width改为多少，ie中宽度都是100%！看到别人用法是max-width: none;来设置宽度为100%，跟max-width: 100%;效果一样。
第二个问题：xhtml当使用float:left;时,margin最左边的宽度在ie中变为两倍。看下面的网页：
这个问题可以用父元素的padding来取代子元素的margin来解决：
但是这样有出现了padding向外扩展的问题，蓝色区间的宽度应为padding而加宽了10px，实际的蓝色区间为610px！
另一中解决方法是用子元素的border取代其margin，也是我blog中使用的方法：
可以看到page6中上下左右间隔都是10px，正是我blog中的效果。
这些问题总算解决了，但还是有一个问题困扰着我，就是padding到底是应该向外扩展还是收敛。
根据REC-CSS2-19980512关于box的定义：http://www.w3.org/TR/REC-CSS2/box.html
border,padding,content,margin都是box的一部分，那么，问题的根源就是到底width和height定义的是box还是content。
我发现有这样一句话：
The dimensions of the content area of a box -- the content width and content height -- depend on several factors: whether the element generating the box has the 'width' or 'height' property set, whether the box contains text or other boxes, whether the box is a table, etc.
10.2 Content width: the 'width' property
10.5 Content height: the 'height' property
原来width和height定义的确实是content，所以firefox跟opera8浏览器对于padding的解析是正确的，而ie6就有些错误了^^。
而且ie中float:left时两侧margin加倍的问题确实存在，ff和opera没有
那么我所碰到的问题也都是由于ie导致了- -，相信很多人碰到了这个问题，这也算是我找到的一个答案吧。
刚刚看到old9兄的回复，ie中margin重叠的问题解决:
有了这个设计界面方便多了！非常感谢！双倍margin的问题可以用display:inline;解决。
.xxx{
display:inline;
float:left;
margin-left:10px;
}
float元素是block元素，所以在其他非IE浏览器不会受到影响。
评论：
1、百分比100%HTML和XHTML我理解是IE有意这么解释的。因为如果你使用HTML那么你可能以前从事过基于IE5.+的网页制作，IE5＋解释WIDTH就是BOX的宽度，IE6才修正为CONTENT的宽度，所以它继续按IE5错误的方式解释。而如果你用的是XHTML，那么你可能已接触WEB标准，也知道WIDTH的正确含义，所以它就按正确的方式解释。
IE6对于盒模型理解是正确的。
2、MAX－WIDTH在IE6不支持。
感觉你没看过网站重构，那本书不错，建议看看。
by: paravoice | April 21, 2005 4:51 PM
恩
说的是，如果所有html都用content的宽度，不知道多少网站不堪入目了！
确实没看过网站重构，很多人推荐过了，也确实想看，只是本不想再做设计，只是近期又心血来潮，不想居然又碰上这些事情，才多看了一些。
反省一下，学习态度确实有些浮躁，总是蜻蜓点水，自从做了这个blog才开始有所转变，获益匪浅阿~！
by: david | April 21, 2005 6:15 PM
那本书似乎不是很好！！
by: ss | April 21, 2005 7:37 PM
今天知道ie很多缺陷
正在用Opera浏览，嘿，还真不错
by: david | April 21, 2005 7:45 PM
opera使用起来比firefox方便，像对传统html百分比宽度的支持，以及多窗口设计，以及其他很多个性化功能设定
只可惜要收费，上面老是有广告- -
by: david | April 21, 2005 7:56 PM
双倍margin的问题可以用display:inline;解决。
.xxx{
display:inline;
float:left;
margin-left:10px;
}
float元素是block元素，所以在其他非IE浏览器不会受到影响。
by: old9 | April 21, 2005 8:27 PM
原来是这样，又受教了！谢谢。
by: david | April 21, 2005 8:32 PM
Opera到处都有去广告的keygen的说，嘿嘿，懒得找的话我可以mail你一个key。嗯。
另外《网站重构》这本书不推荐，通篇都是理论性的罗里罗嗦没有介绍多少实质性的操作上的技巧，看了之后两个不爽的感受：一是不值，敢情老外也会码字骗钱。二是国内还真能炒作。当然收获也有，不过不是看这书的初衷。
建议看看这本ebook
Oreilly.Cascading.Style.Sheets.The.Definitive.Guide.2nd.Edition.eBook-DDU\OReilly.Cascading.Style.Sheets.The.Definitive.Guide.2nd.Edition.eBook-DDU.chm
还有网上的一些技巧性的教程等等。
对于width和height表示的内容宽度和高度，虽然标准这么定义，但是“谁说标准定义的就一定是好的呢？”我觉得IE的理解更符合一般人的思维习惯。
另外max-width IE是不认的，IE下block元素默认宽度是100%，所以IE下显示正常。一个参考：
min-height, min-width, max-height, and max-width are all unsupported by Internet Explorer for Windows. However, you can use JavaScript to graft support onto these clients. See http://www.doxdesk.com/software/js/minmax.html for details.
by: old9 | April 21, 2005 8:43 PM
哈，old9说的好啊。
刚刚看了你的站，css大牛啊！
赞一个，给你作个链接先:)
by: david | April 21, 2005 8:48 PM
哈哈 十分同意old9的话.
《网站重构》那本书说是带领人们认识webstandard还行,去书店翻翻就可以了,不值得买.
要买的书还就是O'REILLY的,《CSS权威指南》和《HTML与XHTML权威指南》两本书看下来保证有十足的收获.
另外说说那个盒模型.不可否认IE的错误理解要比CSS标准跟容易让人接受,否则我打死也不敢使用百分比的宽度.想想如果使用了百分比的宽度(content的width),再如何使用padding,border-width和margin???padding和margin使用百分比还可以接受,要是border也用百分比(border:1% solid;)???~_~非要天下大乱不可.
所以希望CSS标准加进一个开关,使设计者可以自选盒模型的定义.就像IE6根据DTD来分别解释也行啊...
所以我个人只是推崇webstandard的思想,但不希望被局限在那个小圈圈中.标准也是在不断完善的,大家并不只是要往标准靠拢,同样也需要使标准不断发展.
自己还是更喜欢IE,虽然IE6发布的时间也已经很长了,好像已经跟不上xhtml和css,但希望下个版本能有大的改善.离不开它啊,至少网上银行没法在ff下工作-_-
by: forfor | April 22, 2005 8:00 PM
holistic bent), the music is seldom penny flame as good. Examples I can think of immediately: sandra shine Spacemen 3. Mercury Rev (this one ivey is arguable either way). Sebadoh, angie first with Lou and Eric, then with zoe britton Lou and Jason. They Might Be Giants. brenda Pixies, although they just broke up monica sweetheart before too much of it got to happen. dominique dane video Here's another bold statement: in aneta smrhova my opinion, there are enough exceptions miranda
by: Avy Scott | July 23, 2005 8:21 PM
唉，刚才用 Avant Browser 浏览器看你这页，靠左边的字都跑红边上了，可是换了，Orca Browser 浏览器就好了，在 IE 里边也是犯毛病，靠左边的字都跑到红线上了，看不到，我看这 W3C 标准没啥大用，标准出来了，但是制造浏览器的厂家不遵循，有P用啊，苦死，做网页的人了，什么世道啊
新版本的 IE 出来了，不过看资料安装比较费劲，需要正版验证才好使，希望以后的浏览器能很好的兼容 WEB标准
by: 晕了 | April 12, 2006 1:19 PM
其实我认为是W3C定义的有问题,width/height 定义成box width/height更合适.
by: achun | May 19, 2007 4:20 PM