Background overflows border by 1px on inline-block with direction: rtl in IE8-10pre1

In Internet Explorer versions 8 to 10preview, when an inline-block div gets a property of "direction: rtl;", it's background will overflow 1px beyond the border on the right.

Here's a Jsfiddle demo: http://jsfiddle.net/8KgvB/6/ (Creating this demo was a headache by itself because IE doesn't like Jsfiddle [or vice versa] but that's a different story altogether)

IE7, obviously lacking inline-block functionality, doesn't have this issue, even with the zoom:1 hack.

Is this a bug? or did I simply miss something? Maybe some开发者_运维百科one has a workaround.

Thanks!

Stupid IE... facepalm

here's a "fix" for this glaring bug in IE. you just use a wrapper with the rtl attribute.

Edit

I was informed that just posting a link is not a good idea on SO so here's the code too :P

div.outer {
    border:1px solid black;
    line-height:60px;
    width: 100px;
    text-align: center;
    display:inline-block;
    background-color: red;
}

div.inner {
    direction:rtl;
}