css实现DIV居低功能，但在手机的火狐浏览器上出现链接偏移_html/css

css实现DIV居低功能，但在手机的火狐浏览器上出现链接偏移_html/css_WEB-ITnose

WBOY

Freigeben： 2016-06-24 12:26:30

Original

1339 Leute haben es durchsucht

很奇怪，在PC的火狐、IE浏览器和iphone的浏览器上都能正常使用

但在手机火狐浏览器打开时，页面布局显示虽然正常，但img的点击事件的位置却出现了偏移，即我要在原图片的位置再左上的位置点击才会触发onclick事件

CSS部分

<style type="text/css">.shape{width: 100%;  height: 100px; position:fixed!important; position:absolute;bottom:5px!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>

Nach dem Login kopieren

BODY部分

<div id="top" class="shape" >	<table width="100%" background="pages/wap/images/06.gif" border="0" align="center" cellpadding="0" cellspacing="0">      <tr>        <td width="25%"><div style="text-align: center;"><img  src="pages/wap/images/08.gif"    style="max-width:90%"  style="max-width:90%" onclick="goHome();"/ alt="css实现DIV居低功能，但在手机的火狐浏览器上出现链接偏移_html/css_WEB-ITnose" ></div></td>        <td width="25%"><div style="text-align: center;"><img  src="pages/wap/images/09.gif"    style="max-width:90%"  style="max-width:90%"  onclick="goBack();"/ alt="css实现DIV居低功能，但在手机的火狐浏览器上出现链接偏移_html/css_WEB-ITnose" ></div></td>        <td width="25%"><div style="text-align: center;"><img  src="pages/wap/images/10.gif"    style="max-width:90%"  style="max-width:90%"  onclick="goHelp();"/ alt="css实现DIV居低功能，但在手机的火狐浏览器上出现链接偏移_html/css_WEB-ITnose" ></div></td>        <td width="25%"><div style="text-align: center;"><img  src="pages/wap/images/11.gif"    style="max-width:90%"  style="max-width:90%"  onclick="goLogin();"/ alt="css实现DIV居低功能，但在手机的火狐浏览器上出现链接偏移_html/css_WEB-ITnose" ></div></td>        </tr>    </table></div>

Nach dem Login kopieren

回复讨论(解决方案)

把img的格式，设置成display=block试试看。。。

写的真有点?嗦。。。

忘记说了，手机上的网站，刚点击进去的时候，是正常的(即在底部，且点击按钮有效)

但如果内容多，往下拖动之后，就出现虽然还是在底部，但直接点击按钮没反应，可如果往按钮的左上位置点击却能触发按钮的事件

把img的格式，设置成display=block试试看。。。
试了下还是不行

发现，如果设置 height：70px以上时，底部按钮触发事件的位置就会正常，而65px打下都不行，而我需要的是48

有一种情况，就是：我把table加到79px的且设置td的vlign为top时，他可以正常使用：例如下面的代码：前两个td可用，或两个不行，如果设置table的h为50的时候，4个都出问题

<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>

Nach dem Login kopieren

那你得继续加油了，很抱歉的说，我帮不了忙了！！

移动端的开发，不太熟~~~

加油加油，

BUG效果还原成功，网址：
http://heavens.duapp.com/webpage/wapindex.jsp
这个刚点点的时候是没问题的，如果点击跳到相同内容的页面就还原问题了[话说即使用超链接返回，问题还是存在]

有兴趣的朋友可以用拿火狐手机浏览器去测试下

把样式全脱了也还是这样难道是FF的问题？
http://heavens.duapp.com/webpage/test.jsp

<%@ 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>基本无样式的情况</title>	<base href="<%=basePath%>">    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	</head>   <body style="background-color: #1863C7;"><table>   <tr><td><a href="webpage/wapindex.jsp">返回</a></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>  <tr><td >很多内容</td></tr></table><table   style="background: green;height: 59px;">     <tr>       <td valign="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>       <td ><a href="javascript:void(0)"  onclick="javascript:alert('退出')" style="font-size: 10">退出</a></td>     </tr> </table></body></html>

Nach dem Login kopieren

是火狐的BUG问题- -！
http://mozilla.com.cn/post/59172/