首先,说明下,第一次测试忽视了一个属性在不同编码,浏览器下的不同解释造成的尺寸不同,即line-height属性。
可以看出:
1,gb2312编码下:
未定高度,由文字填充的block元素在ff和ie下高度一致,
只是inline元素在ie7中要比在ff中较高。
2,utf-8编码下:
inline,block(未定宽高)元素ie和ff的差别就大了。(ff中的inline,block元素都要比ie7中较高)
3.不论在gb2312或utf-8编码下,ff3的显示都是一致的(对照第一幅的左半边和第二幅的左半边)。
而ie7中相差就比较大了(gb2312编码下的inline,block元素都要比utf-8的高)。
4.ff下的bloak元素边框与文字间,上下有一定的间隙(类似padding,但无法去除)。
ff下的inline元素与其他元素上下也有一定间隙(类似margin,但无法去除) 。
另外,图中看不到的:
1.在ie6中,utf8同gb2312的显示是一致的,都同ie7下的gb2312效果(第一幅的右半边)
2.在opera(我一直用的9.6),utf8同gb2312的也是一致的,都同ie7下的utf-8效果(第二幅的右半边)
3.safari同ff3完全一样.utf8同gb2312完全相同。
附代码(需拷到本地,保存为对应编码):
(gb2312)
(UTF-8)
在定义固定的line-height之后,很多差别都消失了(可以比较出line-height在不同编码,浏览器下的默认值啊)。
(区别如图)