Internet Explorer 自行移动网页元素答案

【问题标题】：Internet Explorer moves webpage elements by itselfInternet Explorer 自行移动网页元素
【发布时间】：2016-08-15 07:37:07
【问题描述】：

我有一个有趣的困境。对于 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：除非你喜欢无害的烦恼，否则不要点击企鹅！）

【问题讨论】：

标签： html internet-explorer

【解决方案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>

【讨论】：