切片-表格布局时单元格中的图片与空白

 说起用表格布局网页,我总觉得,古老的技术,还是在哪个地方挖个坑埋掉比较好。但貌似不能,因为近来些天,我干的竟然就是这些活。

我学过的东西不少,Photoshop是一例,但却没学过图片的切片,所以刚开始切时,简直不知所谓,只是大概知道,切片完再保存为图片与html时,生成的html文件是用表格布局的。接着发现,如若方方正正地切倒还好,若是横七竖八地切,则满文件的colspan与rowspan,本地浏览器查看,情况尚佳,上传后再看,则真是花样百出了。最明显的一点,是单元格图片下出现的空白

我当然想用CSS这种与时俱进的技术,可淘宝的后台,是有限制的,某些规则是直接过滤掉,不让用,于是哪怕你在本地调试好了十来个浏览器,上传后也会让你哭笑不得。

1.本页使用的HTML声明为<!DOCTYPE html>.本文所讲为切片后生成的html文件。

<table style=”border: 1px solid green;” cellspacing=”0″ cellpadding=”0″> <tbody> <tr> <td><img style=”border: 1px solid red;” src=\'#\'" //www.zfanw.com/blog/wp-content/uploads/2011/05/head-back.png” alt=”三点一式” /></td> </tr> </tbody> </table>

三点一式

如上图所见,上述的代码,在单元格底部,会出现一条空白。

原因在于,<img>是inline级别的元素,inline元素会在底部预留空间,为jpg这样的字符准备。见下图:

三点一式jpg

使用firebug查看行的高度为80px,两个都是。

解决这个问题,有两个办法:

一、img{display:block;}

三点一式

在将img元素声明为block级别后,img就无需为jpg这样的字符预留底部空间,于是单元格里图片下面的空白就消失了。

二、img{vertical-align:bottom;}

三点一式

默认情况下,j等字符在垂直方向上是居中对齐的,即vertical-align值为center,这样才会出现底下的空白预留,一旦把vertical-align值声明为bottom,预留的空白也就消失了。

三、切片,末行的空白条

但是,还有一个问题,就是切片时图片切得很多并且没什么规则,则生成的html里,最后一行会补充许多“分隔符.gif“这样的图片。如下格式:

<tr> <td> <img  src=\'#\'" alt=”" height=”1″ width=”120″></td> <td> <img  src=\'#\'" alt=”" height=”1″ width=”117″></td> <td> <img  src=\'#\'" alt=”" height=”1″ width=”56″></td> <td> </tr>

最重要的是,这个所谓高只有1像素的gif图片,会占据超过它本身高度许多的单元格。也就是上面的tr行的高度不会是1,而会是line-height的值的高度(按文末链接里的说法应该是font-size属性决定的高度,但据我的测试应该是line-height值决定,因为一旦line-height值确定了,font-size值设得再大也没有影响)。

于是,我能做的只是,把该tr的line-height值设为于img同高,即为1,前提同样是img的vertical属性声明为bottom

其他具体可见mozilla上的关于神秘空白的文章。

你可能感兴趣的:(表格,table,切片,空白,神秘空白)