IE10 line-height bug

HTML

<p><del>IE10 has this weird problem</del> Apparently, all <a href="http://stackoverflow.com/a/15883508/799327">standards compliant browsers</a> have this behaviour, where the <span>line height messes up, if an inline-block</span> element has overflow:hidden;. Check out the next sentence to see it in action</p>
<p>This <del>weird bug</del> behaviour should be apparent in <span class="bug">these words</span>. Sucks, doesn't it?</p>
<p>You can set <del>vertical-align:bottom</del> vertical-align:bottom to <del>almost</del> fix it, <span class="bug is-fixed"><del>but the base line</del></span><del> is still a bit off, and it screws up the view in other browsers.</del></p>
<p>If you're in WebKit, <a href="http://cl.ly/image/2C1Z1o1L4135">this is what it looks like</a>. WebKit apparently has a bug, where it doesn't mess it up.</p>

CSS

/* House cleaning */
body {
    font-size:100%;
    font-family:Arial, Helvtica, sans-serif;
    color:#333;
    padding:1em;
}
img {
    border:5px solid #ccc;
    margin:0 auto;
}
p {
    margin:0 0 1.25em;
}
/* Bug */
span {
    display:inline-block;
}
span.bug {
    overflow:hidden;
}
span.bug.is-fixed {
    
}