【第3篇】关于display:inline-block 显示间隙的产生和消除

1.原因:

          inline-block元素水平呈现的时候,因为分行或空格都会显示出间隙,所以,将元素变换为inline-block元素水平之后,这个问题,还是会有的。但这并不是一个bug,这是元素正常的显示。

2.具体现象:

        block水平的元素inline-block化后,IE6/7没有换行符间隙问题,其他浏览器均有;

        inline水平的元素inline-block后,所有主流浏览器都有换行符/空格间隙问题;

3.解决方案:(参考http://www.zhangxinxu.com/wordpress/?p=2357)

    •去掉HTML中的空格,简单粗暴,代码看起来太难看了

    •可以相应的去掉一部分标签的闭合标签,注意最后一个标签的闭合标签还是要留着的

    •给该元素一个margin-right负值,具体数值又是另一个问题了,先放着,有空再整理,这个方法对布局有一定影响

    •给父元素一个font-size:0,本元素再恢复,就ok

    •给父元素一个 letter-spacing: -3px;,本元素为0,但是Opera浏览器不行,它最小间距1像素,letter-spacing为0就会还原了。

    •父元素display: inline-table; word-spacing: -6px;本元素设置0

 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容