避免和清除宽自适应布局在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样式改成这样之后,这个差异就被清除掉了,也十分的简单。

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

 

IE与Google Chrome在像素上不相同

在做网页的时候,在IE和Google Chrome上显示实在是有些不一样,长度宽度有时候都不一样! ...
  • You_and_Me12
  • You_and_Me12
  • 2011年07月05日 23:38
  • 4257

浅谈IE事件处理与其他浏览器的差异

1、触发事件对象(触发事件的元素被认为是目标target): (1)IE下,event对象有srcElement属性,但没有target属性。 (2)Firefox下,event对象有target属性...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年03月05日 13:52
  • 623

JavaScript在IE浏览器和Firefox浏览器中的差异总结

JavaScript在IE浏览器和Firefox浏览器中存在一些差异,以下对这些差异部分进行了总结,以及解决方案: 1.HTML对象的 id 作为对象名的问题 IE:HTML 对象...
  • wang8088498
  • wang8088498
  • 2015年12月14日 17:06
  • 812

IE,火狐,谷歌之间差异

1、获取HTML标签属性值的不同 IE可以直接标签名.属性名获取 其他两种只能用getAttribute或者jQuery方法获取 2、页面整体div居中 IE只需要body设置text...
  • XTZZ92
  • XTZZ92
  • 2016年06月28日 16:44
  • 335

IE6 | IE7 li底部多出几像素bug

IE6 | IE7 li底部多出几像素bug 作者: admin 日期: 一月 18, 2012发表评论 (0)查看评论 先看2个截图 IE6、IE7 ...
  • a9254778
  • a9254778
  • 2012年02月05日 14:20
  • 1448

IE、FF、Chrome浏览器中的JS差异介绍

原文链接:http://www.jb51.net/article/40533.htm 因为浏览器公司各自为利益考虑,到目前为止各浏览器的HTML标准或是JS标准都还未统一。在平常的开发中,我们常使用...
  • greenqingqingws
  • greenqingqingws
  • 2016年01月12日 13:55
  • 1629

野指针的成因与避免方法

野指针: 利用指针你可以将数据写入内存中的任意位置,但是,一旦你的程序中有一个野指针("wild“pointer),即指向一个错误位置的指针,你的数据就危险了—存放在堆中的数据可能会被破坏,用来管理...
  • u014473211
  • u014473211
  • 2014年03月31日 22:07
  • 605

静态布局、自适应布局、流式布局与响应式布局的区别

这两天,看到别人在群里问布局特点,发现自己对这方法还是有点模糊,老是忘,于是上网查了下这方面内容,自己总结写出了,如果有错误地方,敬请指正。 静态布局意思就是只是针对某个屏幕下设计的网页,当屏幕大小改...
  • caoyafeicyf
  • caoyafeicyf
  • 2016年11月23日 14:07
  • 3579

css实现左边定宽右边自适应的两列布局5种方法

在项目实践中不乏有需要两列式布局,左侧固定右侧自适应是比较常见的布局方式,现在我就来总结一下我自己所知道的5种方法。 html代码结构: 我是左边 ...
  • blueblueskyhua
  • blueblueskyhua
  • 2017年02月22日 11:04
  • 891

多种方法实现自适应布局

最近切了几个手机端的网页,第一次切的是美团的首页,为了自适应不同的手机分辨率,需要用到自适应布局,切图的时候是用的第一中方法,用到了定位,后来查找了一些其他方法,现在就介绍几种自适应布局的实现方法: ...
  • wuji3390
  • wuji3390
  • 2017年05月10日 20:26
  • 340
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:避免和清除宽自适应布局在ie中产生几像素差异的方法
举报原因:
原因补充:

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