Различия в позиционировании CSS между IE9 и Opera, Firefox и Opera - PullRequest
Новая
       31

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

0 голосов
/ 27 сентября 2011

У меня проблема с сайтом, на котором я выполняю техническое обслуживание, последнюю тестовую версию можно найти здесь 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>

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

1 Ответ

0 голосов
/ 27 сентября 2011

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

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

ТА вопрос / ответ о положении: относительный

...