Неправильная высота SPAN / DIV в стандартном режиме документов IE7

Question

У меня проблема с вычислением высоты пролета в режиме документа IE7. Если быть точным, div, встроенный в span, возвращает различную высоту в зависимости от версии IE.

Код (jquery 1.4.2, также протестирован на более новых версиях):
$('#sys_MainPage').height()

возвращает cca. 260 в Chrome, Firefox и IE 8/9. Когда я активирую IE7, код режима документа возвращает 863? Вот структура документа с соответствующими атрибутами.
IE7:

----SPAN:sys_MainPage
    height=863
    innerHeight=863
    outerHeight=863
    cssHeight=auto
    position=static
    overflow=visible
--------DIV:UgovoriCopy
        height=853
        innerHeight=863
        outerHeight=863
        cssHeight=99%
        position=static
        overflow=auto
------------DIV:GridViewUgovorGridWrapper
            height=862
            innerHeight=862
            outerHeight=862
            cssHeight=100%
            position=absolute
            overflow=visible
----------------TABLE:GridViewUgovorGrid
                height=142
                innerHeight=142
                outerHeight=144
                cssHeight=auto
                position=static
                overflow=visible
----------------SCRIPT:dxss_1127065360
                height=0
                innerHeight=0
                outerHeight=0
                cssHeight=auto
                position=static
                overflow=visible 

IE9:

----SPAN:sys_MainPage
    height=10
    innerHeight=10
    outerHeight=10
    cssHeight=auto
    position=static
    overflow=visible
--------DIV:UgovoriCopy
        height=0
        innerHeight=10
        outerHeight=10
        cssHeight=99%
        position=static
        overflow=auto
------------DIV:GridViewUgovorGridWrapper
            height=866
            innerHeight=866
            outerHeight=866
            cssHeight=100%
            position=absolute
            overflow=visible
----------------TABLE:GridViewUgovorGrid
                height=765
                innerHeight=765
                outerHeight=765
                cssHeight=765.44px
                position=static
                overflow=visible
----------------SCRIPT:dxss_1127065360
                height=381
                innerHeight=381
                outerHeight=381
                cssHeight=auto
                position=static
                overflow=visible 

EDIT:
Я решил это, удалив UgovoriCopy css height (было 99%). Но я все еще хотел бы знать, почему это было проблемой в режиме документа IE7.

Answer 1

Прежде всего, размещение элемента уровня блока (div) внутри встроенного элемента (span) недопустимо. Во-вторых, браузеры выше IE7 и другие браузеры, такие как FF, chrome и safari, имеют улучшенный механизм рендеринга и интуитивно обрабатывают ошибочную разметку.

Что касается свойства css высоты: 99%, я думаю, что в IE7 он делает недействительной разметку и не знает, как с ней правильно обращаться, он расширяет div на 99%, а тег span включает в себя div он ведет себя так же. Принимая во внимание, что в других браузерах, таких как FF, chrome, даже если разметка недопустима, они обрабатывают ее интуитивно, поскольку div имеет 99% и является элементом блока, но его родительский элемент (span) является встроенным элементом, который занимает высоту, основанную на величине содержимое (ведет себя корректно) и возвращает правильную высоту

Answer 2

Я думаю, что это проблема с т. Е. У вас не может быть div в промежутке. Лучший способ - иметь промежуток в div. Попробуйте изменить эти теги, и ваша проблема может быть проще. Вы также проверяете отступы / поля, потому что правила подсчета отступов по высоте элемента не совпадают с хромом.

Скажите, если мой совет что-то меняет в вашей проблеме.