CSS垂直对齐解析-优快云博客

css2.1 规范

'vertical-align'

      baseline
      将框的基线对齐父框的基线。如果该框没有基线，将框的底线对齐父的基线。、

默认 vertical-align 都为 baseline

那么下面一段html 到底应该成何效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>行内 img 问题</title>
	
</head>

<body>
	
	<p style='margin:0;padding:0;border:1px solid green;'><img id='my' src='my.jpg' alt='my'/>  </p>
	
</body>

</html>

ie 6,7 :

可见图片下有一小段间隔

firefox :

可见图片下没有间隔

那么按照规范应该是 ff 错了？

当然如果想表现一样，设置

vertical-align bottom;或者 display:block;

即可，但 ff 真的可能错了么.

同理 img 换做 input 是同样

ie:

ff:

不过当图片旁有一个文本串时，则 image 时 ie ff 都表现正常了，文本基线对准了p 的基线，img 底框也对准了p 的基线

但是对于 input 并不适用

ff 底端并没有和容器间隔，或者ff认为 input 存在基线？

ie:

ff:

关于图片排列解释：

这是实际上涉及到了传统拼图设计，表格布局的设计思路，当 dtd transitional 时，ie认为到了标准模式，则图片是行内元素依照基线对齐，而ff认为这是 “almost-standards” 模式，仍然以前的做法，块状或者表格里只有一张图片时，则td，div等紧贴图片，只有 ff看到 dtd strict才认为到了标准模式和ie一样表现！

解决方法：

1. Any image alone in a table cell (e.g., single-pixel spacer images) should be made block-level.
2. Any image in a table cell with other images should be vertically aligned with the bottom of the line box.
3. Any image in a table cell with other images and text should have its vertical alignment changed as necessary, if at all.

参考文章：

https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps