IE8-10pre1 中的 inline-block 上的背景溢出边框 1px：rtl答案

【问题标题】：Background overflows border by 1px on inline-block with direction: rtl in IE8-10pre1IE8-10pre1 中的 inline-block 上的背景溢出边框 1px：rtl
【发布时间】：2011-10-19 07:15:30
【问题描述】：

在 Internet Explorer 版本 8 到 10preview 中，当一个 inline-block div 获得“direction: rtl;”属性时，它的背景会超出右侧边框 1px。

这是一个 Jsfiddle 演示：http://jsfiddle.net/8KgvB/6/ （创建这个演示本身就很让人头疼，因为 IE 不喜欢 Jsfiddle [反之亦然]，但这完全是另一回事）

IE7，显然缺乏内联块功能，没有这个问题，即使使用 zoom:1 hack。

这是一个错误吗？还是我只是错过了什么？也许有人有解决方法。

谢谢！

【问题讨论】：

标签： css internet-explorer right-to-left

【解决方案1】：

愚蠢的 IE...facepalm

这里有一个“fix”用于 IE 中这个明显的错误。您只需使用带有 rtl 属性的包装器。

编辑

我被告知在 SO 上仅发布链接不是一个好主意，所以这里也是代码：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;
}

【讨论】：