23

厄介な小さなバグ、これ。

Android チケット 6721に示されているように、絶対配置要素が<a>または<input>タグの上に配置されている場合、Android ブラウザーは z-index を尊重しないようです。私はあらゆる種類の回避策を切望しています。これを以前に制覇した人はいますか？

前もって感謝します！

4

8 に答える 8

11

This problem is probably related to controls and their being special for the browser. While looking at your problem (in chromium) I found a related problem that when you press the tab key you will still be able to focus the input elements. You probably don't want this either (regardless of bleedthrough). The solution is surprisingly simple, you write your script to add the disabled attribute to all input/button/etc. elements that are overlayed. A disabled input will not be able to receive focus (by keyboard or otherwise), and clicking it should be impossible.

As this also disables silly keyboard circumnavigation it is not even a workaround, but a better design that also works with keyboard based navigation as expected.

于 2010-04-08T09:44:51.293 に答える
3

質問に適切に答えるには、バグページを読むことが重要です。問題は、以下の入力の可視性ではなく、その「クリック可能性」です。

私はそれをテストすることはできませんが、これらは可能な回避策です:

0絶対配置を忘れて、そこに 2 つの div を配置し、可視性を切り替えます。

これがあなたを満足させないなら...

1aすべてのタグに対して CSS 位置を絶対または相対に設定してみてくださいinput(そうです、レイアウトを維持するために CSS を書き直す必要があるかもしれませんが、それだけの価値はありませんか?)

2<a> -tag コンテナーを作成します。

 <div style="z-index:100 etc."><a style="width: 100%; height:100%; z-index:101">
     stuff here
 </a></div>

これには、コンテンツの見栄えを良くするために、さらに CSS が必要になります。しかし、私はこのような問題が解決されることを期待しています。

1 と 2 が役に立たない場合は、両方を一度に試してください;)

3それでも発生する場合 クリックしたときに何が起こるかを詳細に確認することをお勧めします。click および mousedown イベントをlink on top、container on top、input in the bottomおよびログにバインドします。上のリンクでこれらのイベントのいずれかを取得した場合、ある瞬間にバブリングを停止するか、下部の入力でイベントを防ぐことができます。

これは難しいでしょうが、私は少し助けることができます。jQueryはかなり必要です。

于 2010-04-09T18:11:48.363 に答える
2

これを、問題を引き起こすすべての要素の CSS に追加します。

 -webkit-backface-visibility: hidden;
于 2014-08-12T21:49:29.493 に答える
2

Past fixes for this issue for IE include, but are probably not limited to the following list. These may help solve the problem in Android for you.

  1. Put an iframe behind the absolute content. The iframe may obscure those elements for you

  2. When you display your absolute content, hide all of the problem elements with JavaScript

  3. Define the div's in the opposite order

Point number 1 is deemed the most reliable fix for IE, but may not be the nicest fix for you.

于 2010-04-07T08:39:16.080 に答える
1

INPUT と A を DIV でシミュレートします。

[PSEUDO JQUERY CODE]

<div href="http://google.com" rel="a">Link</div>

<div class="field">
    <div></div>
    <input type="text" style="display: none" />
</div>

<script>
    $('div[rel=a]).click(function() {
        location.href = $(this).attr('href');
    });
    $('.field > div').click(function() {
        $(this).hide();
        $('.field > input').show();
    });
    $('.field > input').blur(function() {
        $(this).hide();
        $('.field > div').html($(this).val()).show();
    });
</script>
于 2010-04-06T20:46:25.173 に答える
0

IEにもこれと同じ問題があり、解決策は、ポジショニングに関係するすべての要素、さらにはそれらのコンテナーにz-indexが適用されていることを確認することです。基本的に、dom内の1つの要素にz-indexを追加すると、IEはそのz位置を理解しますが、その隣や上にあるものに対するz位置を理解しません。

コンテナ-z-index0の
子（一番上のコンテナ）-z-index 1
の子2（とりわけ）-z-index 999

もちろん、これはすべて愚かなIEに基づいていますが、Androidでも試してみる価値があります。

2回目:)

私はAndroidブラウザにまったく精通していませんが、問題を解決するための道を案内したいと思っています。Superfishは、ブラウザの選択ボックスにドロップダウンしたときにz-indexメニュー項目のソリューションを実装したjavascriptメニューです。BgIframeは、これを実現するために使用するjsです。うまくいけば、あなたの答えはそこにあるかもしれません。

http://users.tpg.com.au/j_birch/plugins/superfish/#sample2

于 2010-04-02T08:22:13.947 に答える
0

この問題を解決したい場合は、まず親ラッパーに z-index を追加し、他の要素に z-index を明確に追加する必要があります。解決策は、すべての要素が z-index プロパティを正しく理解するためのゼロ点を持つことです。

于 2014-05-16T13:58:06.147 に答える
0

アンダー HTML を div に配置し、javascript を使用して display:none を設定すると、クリック可能でモーダルではなく、アンダー コンテンツがなくなります。

于 2012-01-08T22:38:01.593 に答える