Положение тегов меняется между разными браузерами

Question

Я пытаюсь создать шаблон с использованием CSS и XHTML.

Сейчас у меня проблема в том, что один из тегов в моем шаблоне меняет положение в зависимости от браузера.Это так, как я хочу, когда я открываю его в Chrome, но когда я открываю его в IE, он сдвигается вправо ...

вот код CSS для моего шаблона

    <style type="text/css">
        #header {
            background-color: FEB7B7;
            height: 100px;
            width: 800px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
        }

        #menu {
            background-color: FBFEB7;
            height: 50px;
            width: 440px;
            left: 791px;
            top: 58px;
            color: Black;
            position: absolute;
            z-index: 2;
            color: Black;
        }

        #content {
            background-color: B7CCFE;
            height: 730px;
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        #footer {
            background-color: BCFEB7;
            height: 40px;
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>

Answer 1

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

То, что вы действительно видите, - это разница в браузереразмер области просмотра;попробуйте изменить размер окна, и вы поймете, что я имею в виду.Это можно исправить, разместив меню div ВНУТРИ заголовка div.И затем вместо использования left и top в вашем #menu CSS используйте right: 0px и bottom: 0px.Это будет привязывать ваше меню к нижнему правому углу вашего заголовка, что, я думаю, именно для этого вы и стреляли.

Так что ваш HTML будет выглядеть так:

    <div id="header">
        <br />Student Name:
        <br />Student Number:
        <br />Assignment #2: Introduction to PHP<br /><br />

        <div id="menu">    
                <br />
                <center>
                    <a href="index.php">Home</a> | 
                    <a href="Question1.php">Question 1</a> | 
                    <a href="Question2.php">Question 2</a> | 
                    <a href="Question3.php">Question 3</a> | 
                    <a href="Question4.php">Question 4</a>
                </center>
        </div>
    </div>

И ваш CSS будетизмените на это:

    #menu {
        background-color: #FBFEB7;
        height: 50px;
        width: 440px;
        right: 0;
        bottom: 0;
        position: absolute;
        color: black;
    }

В вашем коде есть несколько других проблем, не говоря уже о вашем стиле кодирования, но я пока остановлюсь на них, так как это должно ответить на ваш вопрос.спросил.

Вы можете посмотреть на этот пример .