避免和清除宽自适应布局在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群”上有朋友遇到页面无...

基于像素自适应分割的运动目标检测算法

申明,本文非笔者原创,原文转载自:http://blog.csdn.net/kezunhai/article/details/9426681 本文是根据M. Hofmann等人在2012年的...

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

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

基于像素自适应分割的运动目标检测算法

Pixel-Based Adaptive Segmenter(PBAS)检测算法,从思路和框架上看,该算法是结合了SACON和VIBE两个算法的优势,并进行了一些细微的改进而成的,算法在检测性能上优于...

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

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

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

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

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

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

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

首先解释一下什么是“三栏布局”:顾名思义,三栏布局就是在网页上以平铺方式展现的左中右三列布局,其特点在于,左右两列可固定在网页左右两侧,中间一列永远居中,且当网页宽度大于左右两列宽度之和时,中间一列可...

用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化

[html] view plain copy  pre name="code" class="html">div id="one" class=&...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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