绝对定位后的IE3像素偏差
当容器内的一个元素被定义为绝对定位后(通常用户 more>> 或者其他需要单独缩进的地方),在IE和FF下显示的效果会相差3像素,IE6 7 8的显示效果均是偏下3个像素。问题很诡异。示例代码如下。
解决方法:在absolute元素的父容器中设置 position:relative,同时指定absolute元素的top值,问题解决。即修改下面代码中的对应代码为:
.flink p{float:left;color:#666; font:100 12px/24px Arial;width:460px;margin:20px 0 0 100px; display:inline; position:relative;}
.flink p span{margin-left:-60px;position:absolute;top: 0;}
————————————————————————————
[code]
<div class="foot">
<div class="flink">
<p><span>友情链接:</span><a href='http://baidu.com' target='_blank'>百度</a> | 。。| 。。 | 。。| </p>
<p class="copy">Copyright © 2005-2010 All rights Reserved Powered by <a href="/">elingxin.com</a>
</p>
</div>
</div><!--/foot-->
<style>
.foot{background:#121212}
.flink{width:1000px; height:87px; margin:0 auto;}
.flink p{float:left;color:#666; font:100 12px/24px Arial;width:460px;margin:20px 0 0 100px; display:inline; }
.flink p span{margin-left:-60px;position:absolute;}
.flink p a{color:#666;}
.flink p a:hover{text-decoration:underline}
.flink p.copy{margin-left:180px;width:238px;color:#ead773;}
.flink p.copy span{display:none}
</style>
[/code]