在IE6.0,IE7.0游览器,或者IE8.0游览器的IE7.0兼容性视图下,图像显示会有一个问题:“在图像的下面会空出小小的空隙”。

而这个小小的空隙,往往通过设置margin, padding, border 为 0 ,所无法消除的。记得初次接触 html, css 的时候,为此非常苦恼。

比如:

<img src=”/images/1.jpg”/>

<img src=”/images/2.jpg”/>

这样的img元素堆叠的代码,在firefox, chrome中,可以通过 margin, padding, 控制图像之间,是否需要空行间隔,但在IE7.0中,就很可能失效,永远有小空行间隔了。

解决的办法,其实很简单,在img的css中加上:

display:block;

就可以解决IE6.0,IE7.0的兼容性问题了。

原来,IE7.0默认的img不是作为block元素来显示,而是作为inline元素来显示的。

另外,目前使用IE游览器的用户,越来越多的升级到IE8.0了,那么还有一个迅速甚至偷懒的解决办法,就是强制IE8.0不使用兼容性视图,具体的只要在中追加:

<meta http-equiv=”X-UA-Compatible” content=”IE=8″ >
 
关于IE采用什么模式显示,更多的内容可以参考:

Internet Explorer 8 document and browser modes

Defining Document Compatibility

扩展和联想:

访客的留言(1)

  1. 顶一个 博主万福

欢迎留言