IE6、7的inline-block

来源:互联网 发布:犀牛for mac 中文版 编辑:程序博客网 时间:2024/06/03 19:30


在实际操作中经常会用到display的inline-block这个属性,如我们所期望的那样它也经常很配合的将我们所需要转变的行内元素渲染成看起来像行内元素的块状元素,写这里细心的朋友肯定会发现我说的是“看起来像”,为什么是看起来像?这里也是我所要写的一个重点,众所周知行内元素是不拥有宽高等块状级所拥有的属性的,而我们这个时候应用inline-block后它和块状元素一样拥有了这一系列属性,这也是产生这一误区的主要原因,对于IE6、7是不能识别inline-block的,这个时候拥有这一系列属性只不过是触发了layout后渲染出来的而已。

对于它是不是支持或者只是渲染我想很多人和我一样在不碰到问题前很少会去纠缠这个问题,不过很不幸的最近我恰恰对于这个问题碰到了点小麻烦,在一个块状元素和一个行内元素中第一个需要有宽又怕麻烦没用浮动所以我给了它inlin-block然后“由于需要又给它定义了下边距”,这个时候所有浏览器当然除了IE6、7以外都是正常表现切第二个定义了vertical居中的输入框,垂直居中表现,而在ie6、7中居然换行了,哎一下子就验证了上面的话IE6、7不支持inline-block,对于本身就拥有layout属性的块状来说layout根本就不需要触发,这个时候只需要将直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout或者网上比较常见的换行重申定义这里我就不详说了,这样就结束了?

当然没有,如果仅仅只是这个问题也就不需要在这么大费口舌的来说这些了,对于这块的文章网上我想随便搜搜都有的你看了,好了言归正传,这个时候我们在用IE6、7查看,却会发现第二个行内元素却是居低对齐的上面出现了很大的一个空白顶部,而这个问题细心点的已经发现是怎么出来的,看看上面我专门打的那个引号,是的这个问题就是那个定义的下边距说产生的,解决办法有很多比如定义也同样定义下边距或者定义它为relative和 它的负top值拉上去等等……
好了这里真的结束了,对于前端我想细心真的必不可少,而我也远远还不够!