ie img 有 3px 的缝隙也是 ie 的经典 bug 之一,相信已经不陌生了,但还是先看看效果吧(也许你并没有见过):
这个缝隙的大小网上说是 3px ,其实在 ie 里是 4px (你可以设置图片父元素的负 margin 测试),而效果2 在 FF 里下方有 3px 的缝隙,在 opera 里下方有 2px 的缝隙。
这个小缝隙在有些情况并不会造成太大的影响,不修复也没有关系;但如果对有些情况影响较大,那就不得不修复了。修复方法有很多:
1、改变XHTML排版,让 img 的后面紧跟标签(若没有文字的话),如:
<div><img src="" alt="" /></div>
而不是:
<div>
<img src="" alt="" />
<div>
2、为 img 设置 display:block ;
3、为父元素设置 font-size:0 ;
4、为 img 设置 vertical-align 属性,值可以是: top|bottom|text-top|text-bottom (其他值效果不好或没有效果)。
Css 选择器 算法 规则
图片与文字对齐,vertical-ailgn:负值
block元素(块元素)大致有:P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(随着html5标准的推进,一些元素将被废除,而一些新的元素将被引入)注意的是并非所有的block元素的默认display属性都是 block,像table这种display:table的元素也是block元素。
…… …… 余下全文