Actually,simplicity is not simple
2009-10-04Develop
none
1 条评论

inline/inline-block间隙到底是谁的bug

在这看到篇文章《Firefox Bug: inline/inline-block的间隙》。

作者说这是Firefox、chrome、opera等浏览器的bug,当然是带着嘲笑的语气说的。 但这问题到底是谁的bug呢?inline/inline-block的作用是将素显示为行内元素,虽然是做为行内元素那就得有行内元素的特点。

举个例子,A标签是行内元素大家都知道,当两个A标签靠近放在一行上时会发现标签之间没有间隙,这和两块级元素靠近放在一行上并对其使用display:inline;或inline-block;的效果一样; 好,再想想两个靠近的A标签之间如果有空格或不在同一行上会是什么效果,不难发现两A标签之间奇迹般的有了间隙。

回想到这再回头看看本文开头所说的inline/inline-block的作用,相信大家对到底是谁的bug心中有数了。

所以我认为对使用了display:inline/inline-block;后的元素如果之间有别的字符,那么应该是有一定间隙的。

那如何解决IE与其它浏览器之间不同表现的问题呢?在《Firefox Bug: inline/inline-block的间隙》的留言中王传业给出了解决方法,

给外层容器定义letter-spacing=-4px,再对内部的inline-block的元素设置letter-spacing=0

原理很简单,利用了字间距这属性,让空格之类的字符间距为字符本身的亮度的负值,这样效果就出来了。

不过我测试后发现外层容器字间距设置为-6px更正确些,可看Demo(我只是在《Firefox Bug: inline/inline-block的间隙》给出的Demo加上些改进,人懒!)

用设置字体大小为0的方法不成,因为webkit内核的浏览器不支持这样设置

感悟!人生感悟!

还在学生时代时就想有自己的网站、blog,空间域名都买了,但在做模板时改了很久,更是反了很多次功,到现在也没有一个像样的模板。

Wordpress我一直都没用,模板看了很多,就没一个让我心动的,所以到现在也没有个自己的blog,不能说没有,是没开几天就关了,问题不是在模板,呵呵。

简单其实不简单(Actually,simplicity is not simple)

最近我感悟出来的,真的!有时简单真的很难做到。

写到这不知自己写了些什么,呵呵,算了,就这样吧!