背景显示在IE9的边框右侧答案

【问题标题】：Background shows to the right of the border in IE9背景显示在IE9的边框右侧
【发布时间】：2012-08-26 06:25:27
【问题描述】：

我有一个带有 background-color 和 3 像素白色边框的 div。

当我将html 元素设置为direction:rtl 和overflow-y: scroll 时，我会在边框右侧获得一个背景像素 - 仅在 IE9 中：

我在这里粘贴我的代码，因为在 JsFiddle 上我无法复制错误。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            html {
                overflow-y: scroll;
                direction:rtl;
            }
            .main {
              margin: 0 auto;
              width: 960px;
            }
            .sld-menu-item {
                height: 85px;
                border: 3px solid #fff; 
                background-color: #d25188;
            }
    </style>
</head>
<body>
    <div class="main" role="main">
        <div class="sld-menu-item sld-menu-item-2">
        </div>
    </div>
</body>

有没有人遇到过这个问题，和/或有人可以提出解决方案吗？我不能放弃滚动和 rtl 规则...

【问题讨论】：

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

【解决方案1】：

我只能通过设置溢出来修复它：隐藏在包含元素上并进行负边距破解：

.main {
    overflow: hidden;
}
.sld-menu-item {
    margin-right: -1px;
}

您可能还想将 sld-menu-item 的宽度设置为 961px。大概可以把它放在一个 IE9 条件语句中。我希望有更好的方法来解决这个问题。

【讨论】：

【解决方案2】：

我用头撞墙了几个小时，最后我以一种非常奇怪的方式解决了它...... 将.main的宽度改为961px，微软似乎不知道如何找到一个偶数范围的“中间”。

【讨论】：