上一篇
下一篇
避免和清除宽自适应布局在ie中产生几像素差异的方法
作者:飘零雾雨 日期:2007-07-24
标题想了半天也想不到一个好的，感觉怎么写怎么长!- -怕是小学时缩句没学好。
今天想说的这个问题应该算是老调重谈了，不过写出来希望会给大家一些帮助，也使我自己不会忘记，毕竟好记性比不上烂笔头。
相信做过宽度自适应布局的同学都碰到过在ie下莫名其妙的多出几像素的问题，我也觉得ie总是让人不断的折腾，可能是怕我们老坐在电脑前不“运动”会滋生出些什么乱七八糟的毛病来：）
先写个在不考虑ie情况下的宽自适应的两栏布局：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>关于自适应宽度布局在IE中的几像素异常</title>
<style type="text/css">
html,body {
margin:0;
}
#dyhead {
margin-bottom:5px;
}
#dyhead,#dyfoot {
background:#999;
}
#dyleft {
float:left;
width:400px;
height:100px;
background: #666;
}
#dyright {
height:100px;
margin-left:400px;
background: #ccc;
}
#dyfoot {
clear:both;
margin-top:5px;
}
</style>
</head>
<body>
<div id="dyhead">Head</div>
<div id="dyleft">左固定</div>
<div id="dyright">右自适应</div>
<div id="dyfoot">Foot</div>
</body>
</html>
上面的例子在非IE的浏览器中已经比较好的实现了宽自适应的布局，但用在IE中，会发现左右两栏之间多出了一个几像素的间距。
这就是前面说的几像素问题
一、如何避免：
首先应该是去想如何避免出现这个问题，其实很简单，只需要将右栏（也就是要自适应宽度的那栏）的高度去掉，意思就是不要给自适应宽的那栏设置高。
把上面的#dyright样式改为：
#dyright {
margin-left:400px;
background: #ccc;
}
只需要把之前该样式里面的height去掉，就可以避免了出现那几像素差异的问题。
搞定这个问题后，再小玩一下，在不考虑右栏的宽要自适应的情况下。之前因为设置了height会出现这个问题，那么给#dyright加个width又会怎样呢？任意给了一个width值后，发现那消失的几个像素又回来了，于是估计IE中这几像素的差异是不浮动栏中的宽和高在作怪。
二、如何清除
一般情况下能避免这个问题当然是比较理想的，但也不否决会有特殊情况。
如果在不能去除自适应宽度那栏的height情况下，IE中那几像素差异就无法避免了，只能想别的方法来清除掉这个差异。
当然，这也是非常简单的一个方法，只需小改一下就OK。修改如下：
#dyleft {
float:left;
width:400px;
height:100px;
background:#666;
margin-right:0;
_margin-right:-3px;
}
#dyright {
height:100px;
background:#ccc;
}
只需要给#dyleft加上一个margin-right负值就行了，开始你可能不知道这几像素差异具体是多少，但这几像素在页面上才那么点大，所以绝不会超过5px，这样你就可以一个一个去试咯，直到正好合适为止。
至于为什么是负值而不是正值，应该不用说了吧。如果这里给margin-right一个正值的话，那就把右栏推得更远，而这个缝隙也就更大了。
还有就是为什么要加一个_margin-right:-3px;这个的样式呢？因为在非IE浏览器下不会出现这个异常，如果这时也margin-right:-3px的话，那么它们左栏的宽度将会减少3px，所以它们的期望值是不变，于是就通过这样一个hack来绕过其它浏览器。
最后一点变化，就是将#dyright中的margin-left:400px去掉，因为这个也会给该栏的宽度带来变化，而宽度正是引起这个差异的元凶之一，所以应该去掉。
到这里，将#dyleft和#dyright样式改成这样之后，这个差异就被清除掉了，也十分的简单。以上的内容中出现ie均为ie6。
不知道同学们有否更简单有效的方法，如有，请给我留言：）
文章来自: 
引用通告: 
Tags:
究起原因，这3px的BUG，源于#dyright没有浮动，而要是不设定浮动，在FF下面，#dyright的起始位置和#dyleft的起始位置一样，并被其覆盖。
但量#dyright设定浮动，又不能直接这样来自适应宽度，不过换一种方式，还是可以实现的。
诚心愿于博主交流，在我的一篇博文里有详细的探索过程。uu0755.com