CSS - Абсолютно позиционированные div-ы не придерживаются правого края, когда «right: 0px» в IE6

Question

Я нашел пример здесь использования закругленных углов с использованием одного изображения. У меня это отлично работает в IE7 + и FireFox.

Ниже приведен пример макета вкладки:

<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
    <div class="inner"><p>Test 1</p></div>
</div>
<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
    <div class="inner"><p>Test - 2</p></div>
</div>
<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
    <div class="inner"><p>Test - 3</p></div>
</div>

Вот мой стиль CSS:

.corner
{
        background:url(../Images/LightCorner.gif);
        position:absolute;
        width:13px;
        height:13px;
        overflow:hidden;    
}

.inner
{
        position:relative;
        padding:13px;
        margin:0px;
}

.inner p
{
        padding:0px;
}

.tab
{
        color:#FFF;
        float:left;
        font-weight:bold;
        margin-right:5px;
        position:relative;
        text-align:center;
}

.tab p
{
        margin:0px;
        padding:0px;
}

.tab
{
        background:#B5B5B5;
}


.TL
{
        top:0px;
        left:0px;
        background-position:0px 0px;
}
.TR
{
        top:0px;
        right:0px;
        background-position:-13px 0px;
}

.TL, .TR
{
        margin:0px;
        padding:0px;
        position:absolute;
}

Проблема в том, что когда ширина моего div равна чётному числу, я получаю правую границу 1px, как будто верхний правый div на самом деле позиционируется как right: 1px. Когда ширина является нечетным числом, я не вижу правый серый цвет вкладки, и div отображается как ожидалось.

Изображение, которое я использую, можно найти здесь . Полный пример можно найти здесь .

Почему верхний правый div не расположен правильно справа: 0px? Почему я получаю разрыв в 1 пиксель в IE6, когда ширина вкладки является четным числом?

Answer 1

Проблема в том, что когда ширина моего div четное число, я в конечном итоге с 1px правая граница, как будто верх правый div на самом деле позиционируется как правильно: 1px. Когда ширина нечетная номер я не вижу правой рукой серый цвет вкладки и div отображается как ожидалось.

В вашем коде ничего нет, это ошибка в Internet Explorer 6. При абсолютном позиционировании справа или снизу фактическая позиция будет округлена до 2px, что дает 1px "margin", когда общая ширина / высота четная (или нечетная). К сожалению, вам нужен JavaScript, чтобы это исправить.

Вы можете проверить в этом примере (написано мной) и медленно изменить размер окна IE6, попиксельно. Вы заметите, что положение нижнего и правого полей будет обновляться только раз в два пикселя. Другой парень также нашел и задокументировал эту ошибку на своем сайте .

Я уже написал один, чтобы исправить вычисление высоты при позиционировании сверху и снизу и оставить высоту как авто. Я использую этот скрипт на этом сайте . В вашем случае этот скрипт может быть изменен для вычисления смещения влево на основе available_width-(right+width).

Answer 2

Попробуйте с:

right:-1px;

для IE6

Answer 3

Вы пробовали

body { поле: 0; }