Bug IE7 sur largeur impaires

Dans le cas d'une disposition d'élements en "display:inline-block" avec des largeurs en %age, IE7 bug sur une largeur de conteneur impaire.

by oilvier

HTML

<p>IE7 FTW !</p>
<p>Ce brave IE7 a un petit problème avec les width impaires</p>
<code>width:302px;</code>
<div class="wrap" style="width:302px;">
    <div class="one"><p>Left (50%)</p></div>
    <div class="two"><p>Right (50%)</p></div>
</div>
<code>width:303px;</code>
<div class="wrap" style="width:303px;">
    <div class="one"><p>Left (50%)</p></div>
    <div class="two"><p>Right (50%)</p></div>
</div>
<p>Le plus drôle, quand on redimensionne son écran :</p>
<code>width:100%;</code>
<div class="wrap" style="width:100%;">
    <div class="one"><p>Left (50%)</p></div>
    <div class="two"><p>Right (50%)</p></div>
</div>

CSS

* {margin:0; padding:0;}
body {font-family:arial; padding:10px; background:url(http://memeimages.com/wp-content/uploads/2012/07/ancient-aliens-guy-big-hair-giorgio-tsoukalos-220x150.jpeg);}
p {padding:5px; background:white;}
code {background:lightgrey; padding:5px; display: inline-block;}

.wrap {margin:0 0 10px; letter-spacing:-0.31em; border:5px solid gray; text-align: center;}
    .one, .two {display:inline-block; text-align: center; color:white; width:50%; letter-spacing:normal;}
        .one p, .two p {padding:20px; background:none; margin:0;}
    .one {background:firebrick;}
    .two {background:teal;}
    
    .one, .two {*display:inline; *zoom:1;}