No space between inline-block

dabblet.css

body {
  font-family: sans-serif;
}

ul {
  list-style: none
}

a{ 
	text-decoration: none;
	color:white;
}

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: -4px;
}

ul.zero-size {
  font-size: 0px;
}
ul.zero-size li {
  font-size: 16px;
}

dabblet.html

<h1>Inline-block / white-space bug</h1>
original...
<ul>
  <li><a href="x">one</a></li>
  <li>two</li>
  <li>three</li>
</ul>

fixed by funky code formatting...
<ul>
  <li>
   <a href="x">one</a></li><li>
   two</li><li>
   three</li>
</ul>

fixed by adding html comments...
<ul>
  <li><a href="x">one</a></li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

fixed by CSS margin-right: -4px;  (breaks in IE6&7)...
<ul class="white-space-fix">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

fixed by omitting the &lt;/li&gt;
<ul>
  <li>one
  <li>two
  <li>three
</ul>

fixed with font-size: 0 via: http://twitter.com/#!/garand/status/183253526313566208
<br><br>
<ul class="zero-size">
  <li>one</li>
  <li>two</li>
  <li>three</li>/
<ul>

settings.json

{"view":"split","fontsize":"80","seethrough":"","prefixfree":"","page":"all"}

Just one correction: Instead of

ul.white-space-fix li {
margin-right: -4px;
}

Use '-0.31em' to ensure the negative margin doesn't change when the view port is able to zoom:

ul.white-space-fix li {
margin-right: -.31em;
}