欢迎光临朱凯的个人博客!
朱凯,a3.work

解决margin双倍的方法

 发布时间: 2016-12-21 14:25      原创:  朱凯      评论: .       .人查看

IE6下DIV高度显示的Bug以及漂浮margin-left宽度为值的两倍

今天在ie6下调试样式,一个div的高度小于14,而背景是为图片,在ie6中div的高度老是高于14px; 真是让人很郁闷,网上一查才发现原来是个bug:

IE6下默认的字体尺寸大致在12-14px之间,当你试图定义一个高度小于这个默认值的div的时候, IE会固执的认为这个层的高度不应该小于字体的行高。所以即使你用height: 6px; 来定义了一个div的高度,实际在IE下显示的仍然是一个12px 左右高度的层。

要解决这个问题,可以强制定义该div的字体尺寸,或者定义overflow属性来限制div高度的自动调整。

比如 <div style="height: 6px; font: 0px Arial;"></div> 

或者 <div style="height: 6px; overflow: hidden;"></div> 

都可以阻止 IE 的自作聪明。

该问题在 IE7 / Firefox /Opera 下均不存在。

漂浮margin-left宽度为值的两倍 只要加 display:inline;

转载请注明来源:   解决margin双倍的方法  - 朱凯博客

分享是一种快乐,也是一种美德:
¥打开支付宝,扫码领红包¥ 红包

支付宝 aliPay

微信 wxPay