关于DIV重叠定位和图片垂直居中问题的研究（兼容FF、IE6、7、8）

喜欢ヅ旅行 2022-07-14 16:21 156阅读 0赞

[http://hi.baidu.com/divin1ty/blog/item/4efc8c4f4c4556c1d0c86a3a.html][http_hi.baidu.com_divin1ty_blog_item_4efc8c4f4c4556c1d0c86a3a.html]

1、先说重叠定位，这个简单：

父DIV相对定位：position:relative

子DIV绝对定位：position:absolute;top:0px;right:0px

2、图片垂直居中，这个也不麻烦，可是配合上面的重叠定位麻烦就来了。

网上垂直居中的方法都是display:table，在这里父DIV不能改成display:table，这会导致FF里面重叠定位失效，跑到页面的右上角。

给图片加上vertical-align:middle，FF/IE7、8均可，可恶的IE6还是无效！

.zDIV img \{border:1px \#338015 solid;vertical-align:middle\}

最后终于找到了一条针对IE6的hack：在图像的链接中设置一个字体大小，加上IE的hack星号就OK了，太神奇了！

.zDIV a \{\*font-size:200px;\}

\-----------------------------------\--------------------华丽的分割线\-----------------------------------\--------------------

.demo \{  
/\*非IE的主流浏览器识别的垂直居中的方法\*/  
display: table-cell;  
vertical-align:middle;  
/\*防止非utf-8引起的hack失效问题，如gbk编码\*/  
\*font-family:Arial;  
width:600px;  
height:180px;  
line-height:180px;  
text-align:center;  
overflow:hidden;  
background:red;  
\}

.demo a \{\*font-size:160px\} /\* 针对IE6的Hack，自行调节，约为高度的0.873 \*/

.demo img \{border:1px \#666 solid;vertical-align:middle\}

</div>

[http_hi.baidu.com_divin1ty_blog_item_4efc8c4f4c4556c1d0c86a3a.html]: http://hi.baidu.com/divin1ty/blog/item/4efc8c4f4c4556c1d0c86a3a.html
[http_www.baidu.com_img_baidu_logo.gif]: http://www.baidu.com/img/baidu_logo.gif