<h1>Inline-block 元素之间有空格的 bug</h1>
<p>原代码效果</p>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<p>使用奇特的格式来去除空隙</p>
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
<p>使用HTML注释来去除空隙</p>
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
<p>使用 CSS margin-right: -8px; 来去除空隙...</p>
<ul class="white-space-fix">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<p>通过忽略 </li> 来去除空白</p>
<ul>
<li>one
<li>two
<li>three
</ul>
<p>通过 font-size: 0 : </p>
<ul class="zero-size">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<p>flexbox</p>
<ul class="flexbox">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
body {
font-family: sans-serif;
font-size: 16px;
padding: 5px 20px;
}
p{padding:1em 0}
ul {
list-style: none
}
li {
background: slategrey;
display: inline-block;
/* inline block hack for IE 6&7 */
zoom: 1;
*display: inline;
padding: 4px;
color: white
}
ul.white-space-fix li {
margin-right: -8px;
}
ul.zero-size {
font-size: 0px;
}
ul.zero-size li {
font-size: 16px;
}
ul.flexbox {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}