A helper class for an easy and crossbrowser inline-blocks usage (with H5BP).

inline-block-example.html

<ul class="ibw">
  <li>inline block</li>
  <li>inline block</li>
  <li>inline block</li>
</ul>

<section class="ibw">
   <article class="ib">...</article>
   <aside class="ib">...</aside>
</section>

inline-block-helper-class.css

/**
 * @author: Fabrizio Calderan, Jul 21st, 2011
 * Twitter: fcalderan
 * this class has to be assigned to the inline-blocks parent wrapper 
 */
.ibw {
  white-space       : nowrap; 
  letter-spacing    : -3px;
  word-spacing      : -3px;  
}

/**
 * ib class are the inline-block elements: in case we are using a list (<ol>, <ul>) 
 * we could avoid assigning .ib class to every <li> element with .ibw > li
 */
.ibw > li, .ib {
  display           : -moz-inline-box;  /* FF2 or lower */
  display           : inline-block;     /* FF3, Opera, Safari */
  white-space       : normal;
  letter-spacing    : normal;
  word-spacing      : normal; 
  vertical-align    : top /* or other available alignment */ ;
}
    
/**
 * these rules ensure crossbrowsing with IE7. Please note that on IE<8 inline-block will work
 * only on elements that are not natively block elements (applying this on a <div> won't work)
 * Anyway you can safely use on newer HTML5 elements since they're not recognized at all on
 * these IE versions (see http://jsfiddle.net/fcalderan/YjXyS/ for a demo). 
 */
.ie7 .ib, .ie7 .ibw > li    { display : inline; }