ホームページ > 記事 > ウェブフロントエンド > CSSはDIV下位関数を実装していますが、携帯電話のFirefoxブラウザではリンクオフセットが発生します_html/css_WEB-ITnose
とても不思議なことに、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>
<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/