Различия в позиционировании CSS между IE9 и Opera, а также Firefox и Opera

У меня проблема с сайтом, который я обслуживаю, последнюю тестовую версию можно найти здесь http://www.smithandgeorg.com.au/new/ При просмотре в IE7-9 или Opera эта страница отображается так, как предполагалось, однако в Firefox и Safari меню расположено так, что оно находится напротив левой части экрана. (это лучше увидеть, чем описать).

Проблема, кажется, связана с тем, что я использую позиционирование. Элемент #content расположен в позиции position:relative; top:0px; left:0px, так что когда элемент #menu (который вложен внутрь) расположен в позиции position:absolute; left:0px, он будет подталкиваться прямо к левой стороне элемента #content, как это правильно происходит в IE9 и Opera. Однако Firefox и Safari, похоже, игнорируют тот факт, что #content расположен относительно друг друга, и просто подталкивают #menu к левой стороне экрана.

Я попытался воспроизвести проблему на простой странице ниже, но все сработало, как и ожидалось.

<html>
    <body>
        <div style="border:1px solid red; width:100px; height:100px; position:relative; left:0px">
            <div style="border:1px solid black; width:100px; height:100px; position:absolute; top:60px; left:20px">
            </div>
        </div>
    </body>
</html>

Любая помощь будет принята с благодарностью :)


css firefox absolute position internet-explorer-9
person LittleJohn    schedule 27.09.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Firefox обычно игнорирует position:relative в элементах таблицы, но это можно исправить, добавив display:block к #content:

#content {
position:relative;
top:0;
left:0;
display:block;
}

ТАК вопрос/ответ о позиции: относительная

person whostolemyhat    schedule 27.09.2011