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

WBOY
풀어 주다: 2016-06-24 12:26:30
원래의
1365명이 탐색했습니다.

很奇怪,在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>
로그인 후 복사

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>
로그인 후 복사




回复讨论(解决方案)

把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>
로그인 후 복사

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

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

加油加油,

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>
로그인 후 복사

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿