为什么这段未知高度的图片垂直居中的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>
有没有高手可以帮忙解释一下。
最佳答案
0
初步理解 #img_wrap 绝对定位了，所以他本身是没有高度的，
#test img 指定 top 负值 是没有效果的，在现代浏览器中，
但是 ie 6，7 ，8（不确定）里面有一个 haslayout 的东西，
你的 #img_wrap 绝对定位了，所以激活了 haslayout ，所以 ...
纯属愚见！
收获园豆：30
其他回答(2)
0
测试了一下，似乎chromium和ie对#img_wrap的50%解释的不一样，IE用的是当前div的size，而chromium用的是父div的。
收获园豆：10
是的，很纠结
@artwl:
用js脚本辅助吧
0
这个代码本身没问题，各种浏览器的内核可能不一样，所以对代码的翻译可能会不一样，要用这个install-ietester软件调试网页的兼容性，说白了就是该css样式表，使它在各个版本的浏览器中都能正常显示。。。。。。。
收获园豆：10
