Разрыв в пикселях в ie

Question

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

• У левого есть граница слева установлена на "4px сплошной красный", а ширина 0px и a высота, равная высоте выбранного элемента Dom.

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

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

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

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

альтернативный текст http://img243.imageshack.us/img243/429/captureyv.png

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

альтернативный текст http://img190.imageshack.us/img190/7196/capture1dv.png

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

А ты как думаешь ?

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

Я использую панель инструментов 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 на высоту 0 пикселей.Я уже видел это на divs раньше.

Answer 2

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

Answer 3

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

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

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

Answer 4

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

Answer 5

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