華中天地論壇 - Powered by Discuz! Board

在制作多层边框时，不少网友常常没有注意到多层边框代码里的border、cellspacing、cellpadding、PADDING、margin 等等对边框显示的影响。当总宽度和插图宽度设定的不正确时，在不同的网站里，会有不同的效果。

在“老校友”里，系统会保证你的代码里的总宽度，而自动遮掉太宽的图片右侧。

但在“公用栏目”里，若所设定的边框宽度不足时，网站虽然保留了边框里图片的完整宽度，却把边框的总宽度撑大了。

现以《参加59届巴中校友游轮大联欢感想》这篇帖子为例, 这篇帖子用了10层边框，每层边框（table）里设定的border、cellspacing、cellpadding、PADDING 如下：
border + cellspacing + cellpadding + PADDING = (60 + 1 + 15 + 3 + 1 + 2 + 1 + 10 + 22 + 1 + 2 + 20) = 138

“老校友”里此帖子的代码设定了总宽度为800
减去左右两边的border、cellspacing、cellpadding、PADDING後，可容纳的图片最大宽度是：800 - (138 x 2) = 524
但帖子用了640宽的图片，屏幕上显示出来的图片右侧被斩去了一截，最右边戴鸭嘴帽的男人不见了。（请看以下截图）

有2个方法，可以保证图片的完整性：
1）缩小图片：在插图代码img 里设定 width 不大于524；
2）加大最外一层边框宽度为 640 + (138 x 2) = 916 （图片原宽度加上左右两边的border、cellspacing、cellpadding、PADDING）

在“公用栏目”里，保留了图片的完整640宽，但却把原代码里设定的总宽度为700撑大了，实际上是等于 640 加上左右两边的border、cellspacing、cellpadding、PADDING：
屏幕上显示的总宽度为 640 + (138 x 2) = 916
代码里设定的700宽度等于虚设，所以显得边框宽了很多，小屏幕的网友有可能看不到右边一侧的边框画面。

所以不管在哪个网站，在使用多层边框时，必须注意每层table里的设定的border、cellspacing、cellpadding、PADDING、margin数字，算出边框剩下的可容纳图片的空间宽度，设定出正确的图片宽度和边框需要的总宽度，这样才能设计出完整的边框和图片。

此帖本是我在4年前为巴中网友写的。现转贴于此，因为在华中论坛从freebbs转到imotor的搬迁帖子过程中，也出现了类似的情况。

freebbs论坛与巴中”公用栏目“相似，插入的图片大于可容纳的边框内腔最大宽度时，会把边框撑大。但freebbs论坛的可视宽度较大（最大940px），所以看不出异样。

imotor则与巴中”老校友“相似，边框保持了原设定的宽度800px，区别的是巴中”老校友“会把超出可容纳的边框内腔最大宽度的图片截掉，而在imotor里图片没有被截掉而是穿出了边框外如下图。