绝对定位后的IE3像素偏差

绝对定位后的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 &copy; 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]

本文来自 青岛网站建设 青岛SEO  转载请注明出处,谢谢合作!