Пиксельный разрыв в т.е.

Question

У меня есть четыре элемента Div, размещенных с использованием абсолютного позиционирования, каждый из которых представляет собой границу прямоугольника, который они формируют, когда они сгруппированы вместе, для того, чтобы выглядеть так, как будто выбран элемент Dom на странице (это имитирует поведение границы CSS, используя Div в качестве оверлеев),

• Левый имеет границу слева, установленную на "4px solid red", ширину 0p x и высоту, равную высоте выбранного элемента Dom.

• Верхний имеет верхнюю границу, установленную на "4px solid red", высоту 0px и ширину, равную ширине выбранного элемента Dom.

и т.д. вы можете увидеть, куда это идет.

Я знаю, что это странно, но это очень полезно, см. Aardvark для примера.

Вот как это выглядит в FF, Opera, Safari и Chrome:

http://img243.imageshack.us/img243/429/captureyv.png

и вот как это выглядит в ie 8:

http://img190.imageshack.us/img190/7196/capture1dv.png

Я сразу подумал о проблеме блочной модели, но разве это не должно сделать ее уже? и в любом случае, я использовал jquery, чтобы получить ширину и высоту, что должно предотвратить подобные проблемы. Я перебрал наиболее известные ошибки, но не смог найти соответствия.

Как вы думаете?

PS: это букмарклет, конечно, я пытался изменить тип документа в локальном файле, и это сработало, но в производстве я не смогу.

Я использую панель инструментов ie dev, чтобы нарисовать границу вокруг элемента, расположенного как абсолютный:

http://img21.imageshack.us/img21/3425/capture2uc.png

Мы можем увидеть разрыв.

Answer 1

Проверьте "фактическую" высоту нижнего "границы" div с помощью панели инструментов разработчика IE8. Убедитесь, что это "0".

Попробуйте следующее для этого нижнего div.

<style type="text/css">
    #bottomBorder{
        /* Adding '!important' to each CSS rule 
           will make sure nothing else in your code is 'overwriting'
           that rule. (doesn't work for IE6)
        */
        line-height:0 !important; 
        font-size:0 !important;
        height:0 !important;
        border-bottom:solid 4px red;
        position:absolute;
    }
</style>

ИЛИ попробуйте:

<style type="text/css">
    #bottomBorder{
        border-top:solid 4px red;
    }
</style>

Я думаю, что IE не позволит вам установить div в 0px height. Я видел это на divs раньше.

Answer 2

Я думаю, что вы должны возиться со своим DOCTYPE, так как это обычно приводит IE в правильном направлении

Answer 3

Я бы предположил, что эта проблема имеет отношение к полям и отступам. У вас есть какая-либо информация или разделители внутри ваших DIV? Это может привести к дополнительному пространству, которое вы не учли.

Я бы скорректировал div с полем:0; границы коллапса: крах;

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

Answer 4

Может ли быть так, что IE8 не включает высоту границы как часть своего параметра высоты? Попробуйте также добавить размер границы.

Answer 5

Хорошо, пока у меня нет решения, но я просто отображаю верхнюю границу нижней границы div вместо ее нижней границы, и на данный момент все выглядит хорошо. Если кто-то знает лучше, он все еще приветствуется.