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