前言
每当来个需要既要水平排版又要设置固定高宽时，我就会想起display:inline-block，还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;。然后发现盒子间无端端多了个不可选的空白符，于是想尽办法修复这个bug。
直到一天拜读了@一丝姐、@HAX等高人的秘笈后才顿悟，原来我错了。那不是bug，是我不懂而已。
先行者——IE5.5中的inline-block
当我们为支持IE5.5/6/7而添加这段hack时*display:inline;*zoom:1，总以为从IE8开始才支持display:inline-block属性值。其实从IE5.5开始已经支持了，只是IE5.5/6/7支持的是IE的自定义标准，而从IE8开始则是支持CSS2.1标准而已。
https://msdn.microsoft.com/library/ms530751%28v=vs.85%29.aspx
The inline-block value is supported starting with Internet Explorer 5.5. You can use this value to give an object a layout without specifying the object’s height or width.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style type="text/css"> .bk1{ background: #06F; } .bk2{ background: #F60; } .item{ width: 100px; height: 100px; display:inline-block; } </style> <div class="bk1 item"></div> <div class="bk2 item"></div> <span class="bk1 item"></span> <span class="bk2 item"></span> |
经过CSS2.1洗礼的我们对上述内容不禁会发出两个疑问：
- 为啥block-level element设置了
display:inline-block后还是垂直方向排列呢？ - 为啥inline-level element设置了
display:inline-block后之间没有诡异的间隙呢？
还记得杨过是如何变成神雕大侠的吗？不就是被断右臂后发现左手才是真爱吗:)
好了，其实我的意思是抛弃过去对display:inline-block的认知，重新来理解IE5.5/6/7下的它才是硬道理啦。
对于问题1，首先上面的引用很直白地告诉我们——display:inline-block能触发hasLayout，然后就没了。所以block-level element依然是block-level element，不会一夜成了inline-level element的。结论：display:inline-block仅会触发hasLayout，而元素本该怎么排版还是怎么排版。关于hasLayout的内容可参考《CSS魔法堂：hasLayout原来是这样!》
对于问题2，我们先看看是否真的没有间隙吧！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style type="text/css"> .bk1{ background: #06F; } .bk2{ background: #F60; } .item{ width: 100px; height: 100px; display:inline-block; } </style> <span class="bk1 item"></span> <span class="bk2 item"></span> <br/><br/> <span class="bk1 item">bk1</span> <span class="bk2 item"></span> |
见鬼了，在前一个盒子内添加些文本就出现间隙了？其实这真的和display:inline-block无关的，大家就放过他吧！来上呈堂证供！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style type="text/css"> .bk1{ background: #06F; } .bk2{ background: #F60; } <span class="bk1">no line break</span> <span class="bk2"> has line break </span> |
可以看到蓝色块k和红色块h间存在一个空格，而红色块k后也存在一个空格。可是代码中我们看到蓝红色块间有4个 HTML实体，为啥只有一个空格呢？而红色块中仅仅换了行而已，怎么就有个空格呢？
先抛结论：上面两端代码均是white space、white space collasping再作祟。
White space不仅是空格符那么简单
初看之下以为就是空格键，其实white space是一组空白字符和换行符组成。查看unicode字符集我们会发现有一大堆空白字符(如NO-BREAK SPACE等)，但HTML只把ASCII space( )、ASCII tab( )、ASCII form feed()和Zero-width space()纳入white space囊中，另外还将line break(换行符)carriage return(
)、line feed(
)和它俩的组合纳入white space中。
inter-word space——White space的用途之一
西文是以空格来分隔单词的，而汉字间则无需空格分隔，但为了统一西文、东亚和CJK的排版，于是抽象出一个名为inter-word space的概念用于分隔词义单元，white space则作为inter-word space的值域，而定义域就是语言信息。如西文以ASCII SPACE作为inter-word space，而泰文则以Zero-width space作为inter-word space，汉语则没有inter-word space，所以word-spacing属性不影响汉字间的距离，本来无一物何处惹尘埃呢。字形、单词间的水平距离
White space collapsing的玩法
兼容性问题又来了，因为各浏览器的实现均不尽相同。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<style type="text/css"> span{background:#F60;} </style> <div><span> before</span></div> <div><span> before</span></div> <div><span>after </span></div> <div><span>after </span></div> <div><span>after </span></div> ;。然后发现盒子间无端端多了个不可选的空白符，于是想尽办法修复这个bug。
直到一天拜读了@一丝姐、@HAX等高人的秘笈后才顿悟，原来我错了。那不是bug，是我不懂而已。 先行者——IE5.5中的inline-block当我们为支持IE5.5/6/7而添加这段hack时
经过CSS2.1洗礼的我们对上述内容不禁会发出两个疑问：
还记得杨过是如何变成神雕大侠的吗？不就是被断右臂后发现左手才是真爱吗:) 对于问题1，首先上面的引用很直白地告诉我们—— 对于问题2，我们先看看是否真的没有间隙吧！
见鬼了，在前一个盒子内添加些文本就出现间隙了？其实这真的和
可以看到蓝色块k和红色块h间存在一个空格，而红色块k后也存在一个空格。可是代码中我们看到蓝红色块间有4个 先抛结论：上面两端代码均是white space、white space collasping再作祟。 White space不仅是空格符那么简单初看之下以为就是空格键，其实white space是一组空白字符和换行符组成。查看unicode字符集我们会发现有一大堆空白字符(如NO-BREAK SPACE等)，但HTML只把 inter-word space——White space的用途之一西文是以空格来分隔单词的，而汉字间则无需空格分隔，但为了统一西文、东亚和CJK的排版，于是抽象出一个名为inter-word space的概念用于分隔词义单元，white space则作为inter-word space的值域，而定义域就是语言信息。如西文以ASCII SPACE作为inter-word space，而泰文则以Zero-width space作为inter-word space，汉语则没有inter-word space，所以 White space collapsing的玩法兼容性问题又来了，因为各浏览器的实现均不尽相同。
|
