Абсолютное позиционирование на Firefox против Chrome

Question

У меня проблема с созданием меню с использованием jQuery, которое я сводил к проблеме ниже.Этот пример кода визуализируется по-разному в Firefox и Chrome:

HTML:

<table id="topTable">
    <tr>
        <td>
            <div id="outer">
                OuterDiv
                <div id="inner">
                    InnerDiv
                </div>
            </div>
        </td>
    </tr>
</table>

CSS:

#topTable {
    position: absolute;
    top: 50px;
}

#outer {
    background-color: Red;
}

#inner {
    background-color: Blue;
    position: absolute;
    top: 0px;
    left: 100px;
}

В Firefox внешний элемент отображается на 50 пикселей нижестраница, но «внутренний» элемент находится в самом верху страницы.В Chrome «внутренний» div немного выше 50px, но нигде в верхней части страницы.Может кто-нибудь объяснить, почему я вижу это другое поведение?Я заметил, что добавление «position: absolute» к «external» элементу заставляет образец отображать то же самое в каждом браузере, но это портит стилизацию моего реального кода меню.Если бы я мог понять, что здесь происходит, я мог бы выяснить, в каком направлении мне нужно двигаться, чтобы исправить свой настоящий код.Есть идеи?

Answer 1

добавить position:relative; для # external

#outer {
    background-color: Red;
    position:relative;
}

см .: http://jsfiddle.net/5XWcD/1/, Я тестировал в FF6.02 и Chrome 11.0

Answer 2

Установить положение относительно родительского узла

.classParent{
    position: relative;
}

И отрегулируйте верх и налево еще раз