浅谈ie6下容器无法设置1px的高度的原因及解决方法
0
阅: - 评:0 - 积分:传说中的ie6下有很多著名的bug,例如双边距,3px bug,默认最小行高等等。今天就来看看ie6下默认行高是怎么回事。
说起这个默认行高你可能还不太清楚是怎么回事,如果我说是容器1px高度,你可能就知道了。通常情况下,我们定义1px容器的高度只需要height:1px;即可,但这种写法在ie6下是如何呢,我们来看下效果。
- <div style="height:1px; background:#f00;"></div>
看到此图的第一眼我便惊呆了!这不科学!但这是在天朝,尔等只有俯首称臣。ie6下显示高度为15px,为什么会是15呢,因为刚设置了高度为1,在ie6下实际高度=默认高度+设置高度。也就是说ie6下默认高度是14px,说到这里,你可能会百度各种方法,对于网络中给出的方法,笔者保持中立态度,各种方法能不能用只需要测试便可知晓。网络中常给出的多数是如下四种方法:①overflow:hidden;②zoom:0.08;③line-height:1px;④font-size:0;overflow:hidden;对于枚举的四种方法的可行性有多少,一试便知。
- <div style="height:1px; overflow:hidden;background:#f00;"></div><!--①-->
- <div style="height:1px;zoom:0.08;background:#f00;"></div><!--②-->
- <div style="height:1px; line-height:1px;background:#f00;"></div><!--③-->
- <div style="height:1px;font-size:0; overflow:hidden;background:#f00;"></div><!--④-->
来看看下面相对应的组图:
图中第③种方法明显失效,而在网络中的解决方法中,无数篇文章依旧在用,我不得不鄙视那些"借鉴"别人文章的人,网络资源目的是共享,服务于大家,还请各位“借鉴”者在以后的“借鉴”中能够先测试好了再发表,笔者代表广大css初学者感谢你们!
注:由于系统偏差,测试环境可能有误差,以上吐槽内容仅代表个人观点,与本文章无关!
转载声明:
若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:/div/2013-08-31/74.html
若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。
亲,扫个码支持一下艺灵呗~