避免和清除宽自适应布局在ie中产生几像素差异的方法

原创 2007年09月29日 09:51:00
     标题想了半天也想不到一个好的,感觉怎么写怎么长!- -怕是小学时缩句没学好。

      今天想说的这个问题应该算是老调重谈了,不过写出来希望会给大家一些帮助,也使我自己不会忘记,毕竟好记性比不上烂笔头。

      相信做过宽度自适应布局的同学都碰到过在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!important;
 margin-right:-3px;
}
#dyright {
 height:100px;
 background:#ccc;
}

      只需要给#dyleft加上一个margin-right负值就行了,开始你可能不知道这几像素差异具体是多少,但这几像素在页面上才那么点大,所以绝不会超过5px,这样你就可以一个一个去试咯,直到正好合适为止。

      至于为什么是负值而不是正值,应该不用说了吧。如果这里给margin-right一个正值的话,那就把右栏推得更远,而这个缝隙也就更大了。

      还有就是为什么要加一个margin-right:0!important这个的样式呢?因为在非IE浏览器下不会出现这个异常,如果这时也margin-right:-3px的话,那么它们左栏的宽度将会减少3px,所以它们的期望值是不变,于是就通过这样一个hack来绕过IE。

      最后一点变化,就是将#dyright中的margin-left:400px去掉,因为这个也会给该栏的宽度带来变化,而宽度正是引起这个差异的元凶之一,所以应该去掉。

      到这里,将#dyleft和#dyright样式改成这样之后,这个差异就被清除掉了,也十分的简单。

      不知道同学们有否更简单有效的方法,如有,请给我留言:)

 

IE6的3像素BUG产生条件及解决方法

作者:KwooJan 原文地址:http://www.w3cfuns.com/forum.php?mod=viewthread&tid=263 今天“W3Cfuns2群”上有朋友遇到页面无...

HM编码器代码阅读(45)——样点自适应补偿SAO(四)对重建像素进行补偿

对重建像素进行补偿     前面我们已经选取了最优的模式和补偿值,接下来需要根据最优的模式和补偿值对重新像素进行补偿(即对重建像素进行修正)。 入口函数     和选取最...

IE8下DIV嵌套出现外层自适应高度(四种解决方法)

升级了IE8,发现了好些问题,一开始用IE6和IE7都没有的新问题出现了,总归时间有余,就四处查阅解决办法,大概就是以下的四种方法! 当b1和b2都是float=le...

qt android开发篇之如何实现在不同分辨率手机中自适应字体大小,或者像素什么的

我们知道现在手机屏幕的分辨率跟电脑的分辨率不同,或许你直接在电脑中设置的字体像素大小为20,在电脑中运行的时候看起来很正常 的字体,但是部署到手机后大家分先那些字看起来像蚂蚁一样小,这时候改怎么办呢?...

屏幕自适应分辨率与u3d的像素px单位使用

做这一组教程的目的有2个。 1、为了分享一些个人心得经验,很多问题一直困扰这我,然而看了很多资料,并没有讲的非常明确的文章。所以写出来让大家少走弯路 2、为了给自己留一个底以后用的时候方便查询 这篇教...
  • jwxkk
  • jwxkk
  • 2016年07月21日 13:48
  • 1412

HM编码器代码阅读(43)——样点自适应补偿SAO(二)收集像素块的统计信息

收集像素块的统计信息 在进行SAO之前,要对像素块的像素值进行归类,然后判断它们属于EO的那个种类,或者BO的哪个边带 入口函数getStatistics getStatist...

关于css布局中左侧固定右侧自适应的几种方法

第一种:float 浮动法 例如:左侧固定成100px; 则核心代码 左侧:width:100px;float:left; 右侧 width:auto;margin-left:100px; 实例:...

谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法,亲用有效。

rem是css3新增的一个相对单位,我们可以巧妙而有效地用JavaScript结合相对单位rem实现页面自适应布局(尤其适合移动端适配)。 需求:当我们拿到一张设计稿,比如UI设计师设定的是iPhon...

三种三栏网页宽度自适应布局方法

三种三栏网页宽度自适应布局方法
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:避免和清除宽自适应布局在ie中产生几像素差异的方法
举报原因:
原因补充:

(最多只允许输入30个字)