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

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

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}



百度

百度

发表评论

表情：
评论列表 （有 0 条评论，244人围观）

还没有评论，来说两句吧...

相关阅读