行内替换元素排列问题解释

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

 

 

你可能感兴趣的:(设计模式,html,XHTML,IE,firefox)