首页 新闻 赞助 找找看

为什么这段未知高度的图片垂直居中的CSS在IE6IE7下正常,在其他主流浏览器下错位

0
悬赏园豆:50 [已解决问题] 解决于 2012-09-23 13:37

代码如下:

    <style type="text/css">
        #test{
            position:relative;
            width:500px;
            height:200px;
            margin: 50px auto;
            border:1px solid #CCC;
            background:#EEE;
        }
        #img_wrap{
            position:absolute;
            left:50%;
            top:50%;
            background-color:#F60;
        }
        #test img{
            position:relative;
            left:-50%;
            top:-50%;
        }
    </style>
    <div id="test">
        <div id="img_wrap">
            <img src="http://static.cnblogs.com/images/logo_small.gif"/>
        </div>
    </div>

有没有高手可以帮忙解释一下。

artwl的主页 artwl | 专家六级 | 园豆:16736
提问于:2012-09-23 09:57
< >
分享
最佳答案
0

初步理解 #img_wrap 绝对定位了,所以他本身是没有高度的,

#test img 指定 top 负值 是没有效果的,在现代浏览器中,

但是 ie 6,7 ,8(不确定)里面有一个 haslayout 的东西,

你的 #img_wrap 绝对定位了,所以激活了 haslayout ,所以 ...

纯属愚见!
收获园豆:30
张坤 | 小虾三级 |园豆:1865 | 2012-09-23 12:22
其他回答(2)
0

测试了一下,似乎chromium和ie对#img_wrap的50%解释的不一样,IE用的是当前div的size,而chromium用的是父div的。

收获园豆:10
I,Robot | 园豆:9783 (大侠五级) | 2012-09-23 10:06

是的,很纠结

支持(0) 反对(0) artwl | 园豆:16736 (专家六级) | 2012-09-23 10:11

@artwl: 

用js脚本辅助吧

支持(0) 反对(0) I,Robot | 园豆:9783 (大侠五级) | 2012-09-23 12:31
0

这个代码本身没问题,各种浏览器的内核可能不一样,所以对代码的翻译可能会不一样,要用这个install-ietester软件调试网页的兼容性,说白了就是该css样式表,使它在各个版本的浏览器中都能正常显示。。。。。。。

收获园豆:10
斗天! | 园豆:260 (菜鸟二级) | 2012-09-23 13:24
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册