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

就像micha说的那样，这是因为你的菜单绝对位于页面的一侧，而你的其他内容是水平居中的。

您真正看到的是浏览器视口大小的差异;尝试调整窗口大小，你会明白我的意思。这可以通过将标题div放在标题div中来解决。然后，不要在left CSS中使用top和#menu，而是使用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;
    }

您的代码中还有其他一些问题，更不用说您的编码风格本身了，但我现在暂时不再讨论这些问题，因为这应该回答您提出的问题。

您可以查看此example。

标签的位置在不同浏览器之间变化

1 个答案: