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 равна даже числа, я получаю правую границу шириной 1 пиксель, как будто верхний правый элемент div на самом деле позиционируется как правый: 1 пиксель.Когда ширина равна странный номер Я не вижу правого серого цвета вкладки, и div отображается, как и ожидалось.

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

Почему верхний правый элемент div не расположен правильно справа: 0 пикселей?Почему в IE6 получается пробел в 1 пиксель, если ширина табуляции четная?

Answer 1

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

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

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

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

Answer 2

Попытался ли ты

тело {маржа:0;}

Answer 3

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

right:-1px;

для IE6