Love.Passion.Dream

如何让比容器大的图片在IE6下居中显示

很久没有接触浏览器兼容性问题了,今天有一个小需求折腾了半天。就是经常出现的居中问题,只是多了一点条件,居中的图片可能会比容器还大。不能压缩,溢出的部分需要隐藏。

首先,如果只是要居中的话,最简单的就是margin: 0 auto。但是当内容比容器大的时候这招就不管用了。那么另外的解决方案就是设置定位为absolute或者relative,然后left设置为50%,再设置margin-left为内容的负的一半。在设置这个的时候遇到了一个坑,在IE下margin-left需要通过xxx.style.marginLeft来设置,用 xxx.style['margin-left']是不行的,这么基础的问题坑了我半天。

然后就是overflow:hidden的问题了,在IE下position为relative的元素其父元素的hidden对其不起作用,所以需要设置为absolute,当然这样的话需要先指定其父元素的定位方式为relative或者absolute。

看看 demo 吧:margin-test