一个非常奇特且有趣的有关问题_Java Web开发

一个非常奇特且有趣的问题
要在手机上实现一个DIV底部居中的效果，以下是实现代码


<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<title>Wap</title>
	<base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> 
  

<body style="background-color: #1863C7;">

<div>
<table  style="margin-bottom:50px;background-color: #1863C7;height: 100%;width: 100%">

  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
</table>


 <style type="text/css">
.shape{
	width: 100%;  
	height: 50px; 
	position:fixed!important; 
	position:absolute;
	bottom:0px!important; 
	bottom:auto; 
	top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop+(documentElement.clientHeight - this.clientHeight):document.body.scrollTop+(document.body.clientHeight - this.clientHeight));
}
</style>
<div id="top"  class="shape" >
	<table   style="background: yellow;width: 100%;height:79px;border: 0;"    cellpadding="0" cellspacing="0">
      <tr>
        <td style="width: 25%;height: 49px;text-align: center;vertical-align: top"><a href="javascript:void(0)"  onclick="javascript:alert('主页')" style="font-size: 10">主页</a></td>
        <td style="text-align: center;vertical-align: top"><a href="javascript:void(0)"  onclick="javascript:alert('返回')" style="font-size: 10">返回</a></td>
        <td ><a href="javascript:void(0)"  onclick="javascript:alert('刷新')" style="font-size: 10">刷新</a></td>
        <td ><a href="javascript:void(0)"  onclick="javascript:alert('退出')" style="font-size: 10">退出</a></td>
        </tr>
    </table>
</div>
</div>
</body>
</html>

进行手机浏览测试，发现火狐出现问题，目前情况如下：

1刚进入网站的时候，点击可链接

可正常弹出警告

2内容超出一个屏幕，将网站拖动至底部后，无论怎么点击链接的位置

，都无法弹出警告，但如果往上点

竟然出现警告了- -！

3如果设置手机自动转动，打横看，底部的连接可正常使用，问题只出现在竖着看的时候

4如果将手机先打横，再打竖,竟然正常了

5后来发现设置当table的height>69，且vlign=top的时候，

正常。。。但我需要将其设置为50px

[上面没有设置vling=top的两个依旧要偏移点击]

6来论坛发帖求助时，将其放到百度云上http://jlkdsjflks.duapp.com/ 结果奇怪的第6点出现了：同样的代码，在百度云上的正常，但在自己的平台上却出现问题