A Pen by Francis Rupert.

Collapse-inline-block.markdown

Collapse inline-block

A Pen by Francis Rupert on CodePen.

License.

index.html

<ul class="thing">
  <li>thing</li>
  <li>thing</li>
  <li>thing</li>
</ul>

style.scss

@import "compass/css3";
body {
  padding: 10px;
}

.thing {
  letter-spacing: -0.31em; // Webkit: collapse white-space between units
  *letter-spacing: normal; // reset IE < 8
  *word-spacing: -0.43em; // IE < 8: collapse white-space between units
  text-rendering: optimizespeed; // Webkit: fixes text-rendering: optimizeLegibility
}

// Opera as of 12 on Windows needs word-spacing. 
// The ".opera-only" selector is used to prevent 
// actual prefocus styling and is not required in markup.
.opera-only :-o-prefocus,
.thing {
  word-spacing: -0.43em;
} 

.thing {
  > li {
    display: inline-block;
    background-color: #ccc;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
  }
}