ホームページ  >  記事  >  ウェブフロントエンド  >  CSSはDIV下位関数を実装していますが、携帯電話のFirefoxブラウザではリンクオフセットが発生します_html/css_WEB-ITnose

CSSはDIV下位関数を実装していますが、携帯電話のFirefoxブラウザではリンクオフセットが発生します_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:26:301367ブラウズ

とても不思議なことに、PC Firefox、IE ブラウザ、iPhone ブラウザでは正常に使用できます

しかし、モバイル Firefox ブラウザを開くと、ページレイアウトは正常に表示されますが、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" width="55" height="49" onclick="goHome();"/></div></td>        <td width="25%"><div style="text-align: center;"><img src="pages/wap/images/09.gif" width="55" height="49"  onclick="goBack();"/></div></td>        <td width="25%"><div style="text-align: center;"><img src="pages/wap/images/10.gif" width="55" height="49"  onclick="goHelp();"/></div></td>        <td width="25%"><div style="text-align: center;"><img src="pages/wap/images/11.gif" width="55" height="49"  onclick="goLogin();"/></div></td>        </tr>    </table></div>




ディスカッション (解決策) への返信

画像の形式を設定するdisplay=block を設定してみてください。 。 。

文章は本当に少しぎこちないです。 。 。

言い忘れていましたが、携帯電話のウェブサイトは、最初にクリックしたときは正常です (つまり、一番下にあり、ボタンをクリックすると有効になります)

ただし、コンテンツが多い場合は、ドラッグした後、ボタンを直接クリックしても反応はありませんが、ボタンの左上の位置をクリックするとボタンイベントがトリガーされます

画像を設定します。 display=block にフォーマットして試してみてください。 。 。
試してみましたが、まだ機能しません

height: 70px以上に設定すると、イベントをトリガーする下のボタンの位置は正常になることがわかりましたが、65pxでも機能せず、必要なのは48pxです


状況があります。つまり、テーブルが 79px に追加され、TD の vlign が top に設定されている場合、通常どおり使用できます。たとえば、次のコード: 最初の 2 つの TD が使用可能、またはテーブルの h が 50 に設定されている場合、4 つすべてが表示されます。質問
rree

それなら、頑張ってください。申し訳ありませんが、もう手伝うことはできません。 !

私はモバイル開発にはあまり詳しくありません~~~

さあ、さあ、

BUG 効果は正常に復元されました。ウェブサイト:
http://heavens.duapp.com/webpage/wapindex.jsp
これは、最初にクリックしたときには存在しませんでした。問題は、クリックして同じ内容のページにジャンプすると、問題が復元されてしまうことです (ハイパーリンクを使用して戻っても、問題は依然として存在します)

興味のある友人は、Firefox モバイル ブラウザを使用してテストできます

すべてのスタイルを削除します。これはまだ FF の問題ですか?
http://heavens.duapp.com/webpage/test.jsp

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

それは Firefox のバグの問題です - -!
http://mozilla.com.cn/post/59172/

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。