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

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

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

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

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

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

Так вот как это выглядит в ФФ, опере, сафари и хроме:

замещающий текст http://img243.imageshack.us/img243/429/captureyv.png< /а>

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

замещающий текст http://img190.imageshack.us/img190/7196/capture1dv.png< /а>

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

Что вы думаете ?

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

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

замещающий текст http://img21.imageshack.us/img21/3425/capture2uc.png< /а>

Мы видим разрыв.


overlay jquery css internet-explorer-8 gaps-in-visuals
person e-satis    schedule 07.10.2009    source источник
comment
Вы можете получить более качественную поддержку на веб-сайте doctype.com.   -  person Bernhard Hofmann    schedule 08.10.2009

Ответы (5)


arrow_upward
2
arrow_downward

Проверьте «фактическую» высоту НИЖНЕГО «границы» 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. Я видел это на div раньше.

person David Murdoch    schedule 09.10.2009

arrow_upward
1
arrow_downward

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

person Scott Evernden    schedule 07.10.2009

arrow_upward
1
arrow_downward

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

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

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

person Slevin    schedule 09.10.2009
comment
Я установил поля, отступы и высоту на 0px. Но почему граница коллапса: коллапс; ? - person e-satis; 09.10.2009
comment
После повторного прочтения вашей ситуации обрушение границ не будет применяться. Это лучше всего подходит при создании таблиц и т. д., и заставляет ячейки или элементы иметь общие границы. - person Slevin; 12.10.2009

arrow_upward
0
arrow_downward

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

person Justin Johnson    schedule 07.10.2009
comment
скорее наоборот, есть зазор, потому что элемент слишком большой - person e-satis; 07.10.2009
comment
Да, я собирался это сделать, но в итоге установил верхнюю границу вместо нижней, что мешает мне писать код, специфичный для IE, и создает иллюзию, что он работает так, как ожидалось. Хакерский, но прагматичный, я думаю. - person e-satis; 09.10.2009
comment
Это IE, не расстраивайтесь из-за того, что он хакерский;) - person Justin Johnson; 10.10.2009

arrow_upward
0
arrow_downward

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

person e-satis    schedule 07.10.2009
comment
Скорее всего, это проблема с обрушением полей. Схлопывание полей  — в частности, то, как поля могут перемещаться между вложенными элементами — — в первую очередь достаточно запутанно, даже без ошибок IE. А баги с маржей в IE-Quirks-Mode чрезвычайно серьезны. - person bobince; 08.10.2009