Question

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 someone has a workaround.

Thanks!

Answer 1

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 😛

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

div.inner {
    direction:rtl;
}