2016-08-13 77 views
0

我有一個有趣的困境。對於IT課程,我必須設計一個帶有我已經完成的天氣數據庫的網站。它在Chrome和Firefox中很好地顯示(我假設爲Safari),並且大部分都在Internet Explorer中顯示。Internet Explorer自身移動網頁元素

但是,正如你在這些截圖中看到的,當用戶將光標移動到他們附近時,IE似乎會自動移動鏈接和按鈕。 IE佈局移動光標到版權鏈接後 - enter image description here

圖2:: enter image description here

圖3 - 相比 -

圖11E佈局移動光標到版權鏈路之前與Chrome: enter image description here

T他的網址是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:除非你喜歡無害的煩惱,不要在企鵝點擊)

回答

0

原來的Internet Explorer不喜歡<center>標籤,所以包裹的頁面與CSS格式一div解決問題。

代碼:

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

並保持居中表:

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