Question

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

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

enter image description here

我在这里粘贴代码，因为在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规则......

Answer 1

我只能通过设置溢出来修复它：隐藏在包含元素上并执行负边距黑客攻击：

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

您可能还想将sld-menu-item的宽度设置为961px。可能会把它放在IE9条件语句中。我希望有更好的解决方法。

Answer 2

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

背景显示在IE9的边界右侧

2 个答案: