原创作者: zdz8207   阅读:4209次   评论:2条   更新时间:2011-05-26    

今天在页面布局时遇到了个问题:div布局的总是比table的多两个像素,用火狐的查看元素可以清楚地看到用div的多出了两个像素,因为设定了border:#cbcdca solid 1px;把border宽度设置为0则可以了,把border-left设置0则可以看到只多出1px了。而table的则不会超出宽度。

 

现象分析清楚了,原因就很容易理解了,div布局的border属性属于外加的,会在原来宽度基础上加上边框的宽度,而table的border属性属于内置的,会在原来宽度范围内显示--内容区域相应减少边框的宽度。由于有些地方的布局需要用到父容器的宽度--即设值为100%等百分比的形式,这个时候就无法在规定宽度范围内减去边框的宽度了,所以这个时候用div对多出的边框宽度非常头痛,用表格则可以完美解决。但table内容都放到td里面,比div多了几个层次,代码看起来不太美观,另外对应内容多的区域需要整个table加载完才能显示,效果没有div的好。

 

如果全部都加2px 不影响页面效果的话用div是比较好的方法,如果对多出的2px像素很敏感则用table比较实际了,原因找到了,具体情况就具体分析吧!

评论 共 2 条 请登录后发表评论
2 楼 zdz8207 2009-08-17 10:54
jizhuayazhua 写道
还是没解决问题啊      

怎么没有解决问题呢?已经说过问题原因找到了,就具体问题具体分析了
1 楼 jizhuayazhua 2009-08-14 10:51
还是没解决问题啊      

发表评论

您还没有登录,请您登录后再发表评论

文章信息

Global site tag (gtag.js) - Google Analytics