行内替换元素排列问题解释
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 :
http://www.agoit.com/upload/attachment/95370/95894aef-b937-3aaf-83b8-e813e4a62295.png
可见图片下有一小段 间隔
firefox :
http://www.agoit.com/upload/attachment/95373/2f9d649f-04bd-35a2-880a-3d7ae85bc42f.png
可见图片下没有间隔
那么按照规范应该是 ff 错了？
当然如果想表现一样，设置
vertical-align bottom;或者 display:block;
即可 ，但 ff 真的可能错了么.
同理 img 换做 input 是同样
ie:
http://www.agoit.com/upload/attachment/95378/2ff4abc5-fa48-37dc-86e2-2dd6873a77e4.png
ff:
http://www.agoit.com/upload/attachment/95382/706180c2-620f-3aa1-adc2-b5f7c694e98a.png
不过当图片旁有一个文本串时，则 image 时 ie ff 都表现正常了，文本基线对准了p 的基线，img 底框也对准了p 的基线
http://www.agoit.com/upload/attachment/95375/47ba01c4-4b0f-35b6-8a53-e082ac0df7e5.png
但是对于 input 并 不适用
ff 底端并没有和容器间隔，或者ff认为 input 存在基线 ？
ie:
http://www.agoit.com/upload/attachment/95384/c75d5f70-c7f7-3c19-9dec-1030d5979014.png
ff:
http://www.agoit.com/upload/attachment/95388/adbebff2-5644-332d-bc47-e8341a33a52e.png
关于图片排列解释：
这是实际上涉及到了传统拼图设计，表格布局的设计思路，当 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
页:
[1]