艺灵设计

全部文章
×

浅谈ie6下容器无法设置1px的高度的原因及解决方法

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-08-31 15:26:10 - 阅: - 评:0 - 积分:0

传说中的ie6下有很多著名的bug,例如双边距3px bug,默认最小行高等等。今天就来看看ie6下默认行高是怎么回事。

说起这个默认行高你可能还不太清楚是怎么回事,如果我说是容器1px高度,你可能就知道了。通常情况下,我们定义1px容器的高度只需要height:1px;即可,但这种写法在ie6下是如何呢,我们来看下效果。

  1. <div style="height:1px; background:#f00;"></div>

ie6下bug
看到此图的第一眼我便惊呆了!这不科学!但这是在天朝,尔等只有俯首称臣。ie6下显示高度为15px,为什么会是15呢,因为刚设置了高度为1,在ie6下实际高度=默认高度+设置高度。也就是说ie6下默认高度是14px,说到这里,你可能会百度各种方法,对于网络中给出的方法,笔者保持中立态度,各种方法能不能用只需要测试便可知晓。网络中常给出的多数是如下四种方法:①overflow:hidden;②zoom:0.08;③line-height:1px;④font-size:0;overflow:hidden;对于枚举的四种方法的可行性有多少,一试便知。

  1. <div style="height:1px; overflow:hidden;background:#f00;"></div><!--①-->
  2. <div style="height:1px;zoom:0.08;background:#f00;"></div><!--②-->
  3. <div style="height:1px; line-height:1px;background:#f00;"></div><!--③-->
  4. <div style="height:1px;font-size:0; overflow:hidden;background:#f00;"></div><!--④-->

来看看下面相对应的组图:
bug
图中第③种方法明显失效,而在网络中的解决方法中,无数篇文章依旧在用,我不得不鄙视那些"借鉴"别人文章的人,网络资源目的是共享,服务于大家,还请各位“借鉴”者在以后的“借鉴”中能够先测试好了再发表,笔者代表广大css初学者感谢你们!

注:由于系统偏差,测试环境可能有误差,以上吐槽内容仅代表个人观点,与本文章无关!
转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:/div/2013-08-31/74.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: ie6默认行高 1px高度 ie6 bug zoom overflow

上一篇: 纯css实现三角形方法兼容ie6   下一篇: 谈谈自己对于ie6下高度导致两个div间有3px这个bug的看法

评论区