0

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のルールをあきらめることはできません...

4

2 に答える 2

1

私はオーバーフローを設定することによってのみそれを修正することができました：要素を含むことで隠され、負のマージンハックを行うこと：

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

次に、sld-menu-itemの幅を961pxに設定することもできます。おそらくこれをIE9の条件文に入れることができます。しかし、これを解決するためのより良い方法があることを願っています。

于 2012-08-26T06:58:34.960 に答える
1

私は数時間壁に頭をぶつけました、最後に私はそれを非常に奇妙な方法で解決しました....mainの幅を961pxに変更します。Microsoftは均一な範囲。

于 2013-03-07T01:24:08.250 に答える