在工作中遇到一个问题,在html5页面下,使用table布局,td包含img标签,如果td内还含有空白字符,那么td的高度就会出错,导致页面出现空白/间隙,设置了img的vertical-align:top问题依然存在。google了一下,发现stack exchange上有人早就在一年多以前发现doctype在XHTML 1.0 strict下存在该问题并有了解决方案:把空白字符去掉或者设置line-height:1px,img{display:block;}也可以。
原因是在块级元素中单个字符(包括空格)都要占用一个单行,所以块级元素至少要暂用一行的高度,把行高设置成1px就了。
http://stackoverflow.com/questions/1450274/why-td-height-not-equal-to-img-height-inside-of-it-when-doctype-is-xhtml-1
The size of block-level element (td, div, etc) if not specified will only be as big as needed, according to the space taken by its content. If specified, it will try to expand accordingly, except if the content is bigger, in which case it will expand as necessary.
In your example, the cell contains a single character (the non-breaking space), which take the size of single line. Hence, the block element must be at least 1 line-height high; it can’t assume any smaller size. This is why your height declaration was ignored.
不是很懂,能给个实例出来看看就好了,呵呵···