当前位置: 代码迷 >> Java Web开发 >> 一个非常奇特且有趣的有关问题
  详细解决方案

一个非常奇特且有趣的有关问题

热度:5580   发布时间:2016-04-10 23:23:45.0
一个非常奇特且有趣的问题
要在手机上实现一个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点出现了:同样的代码,在百度云上的正常,但在自己的平台上却出现问题
  相关解决方案