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

Question

У меня есть четыре элемента Div, размещенных с использованием позиционирования absolute , каждый из которых представляет собой границу прямоугольника, который они формируют, когда они сгруппированы вместе, чтобы выглядело, как если на странице выбран элемент 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

и вот как это выглядит в т.е. 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».

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

<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

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

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

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

Answer 3

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

Answer 4

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

Answer 5

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