Question

我有一个有趣的困境。对于IT课程，我必须设计一个带有天气数据库的网站，我已经完成了。它在Chrome和Firefox中很好地显示（我假设是Safari），并且大部分都在Internet Explorer中显示。

然而，正如你在这些截图中看到的那样，当用户将光标移动到它们附近时，IE似乎会自行移动链接和按钮。

图1 - 将光标移动到版权链接之前的IE布局：

图2 - 将光标移动到版权链接后的IE布局：

图3 - 与Chrome相比：

网站地址为http://penguinweather.tk。请随时环顾四周是否有帮助。问题也发生在confirmation page上（仅在IE中）。

以下是主页中最相关的代码：

<body class="body">
    <center>
        <h1>Penguin Weather</h1>
        <h2>Weather Database</h2>
        <h3>Welcome to Penguin Weather! You can enter new data here, or click on the second button to view all current weather data.</h3>
        <form action="Database.php" method="post">
            <table>
                <tr>
                    <td>Location:</td>
                    <td>
                        <input type="text" class="textbox" name="loc" autofocus>
                </tr>
                <tr>
                    <td>Temperature:</td>
                    <td>
                        <input type="number" class="textbox" style="width:75px;" name="temp">
                    </td>
                </tr>
                <tr>
                    <td>Password:</td>
                    <td>
                        <input type="password" class="textbox" name="pass">
                    </td>
                </tr>
            </table>
            <br>
            <input type="submit" class="button" style="font-weight:bold;" value="Save Datum">
            <br>
            <br>
            <a href="DataOutput.php" class="button">View Weather</a>
            <a href="/pw/DataOutputV2.php" class="button">View Weather by Month</a>
            <a href="/pw/ModifyData.php" class="button">Modify Weather</a>
        </form>
    </center>
</body>
<footer>
    <center><a href="/auth.html" target="_blank">Copyright &copy; 2016 Penguintech Ltd.</a></center>
    <br>
    <center><small><a href="/dev" target="_blank">View Development Directory</a></small> | <small><a href="/404">Test</a></small></center>
</footer>

提前谢谢。

（PS：除非你喜欢无害的烦恼，否则不要点击企鹅！）

Answer 1

事实证明，Internet Explorer不喜欢<center>标记，因此使用CSS格式将页面包裹在div中可以解决问题。

<强>代码：

<div style="text-align:center">
*page content*
</div>

并保持桌面居中：

<table style="margin-left:auto; margin-right:auto">
*table content*
</table>

Internet Explorer自行移动网页元素

1 个答案: