3

IE 11 で重複する div がある場合、ラジオ ボタンを含む 1 番目の div は、2 番目の重複する div によってマウス イベントの受信をブロックされるため、ラジオ ボタンをクリックできません。私が使用しているコードの簡単な例を参照してください。

<div>
<div style="display: block; border: solid 1px blue;">
    <table>
        <tr>
            <td><input id="rbl_0" type="radio" checked="checked"><label for="rbl_0">Option 1</label></td>
            <td><input id="rbl_1" type="radio"><label for="rbl_1">Option 2</label></td>
         </tr>
    </table>
</div>

<div style="margin-top: -23px; display: inline-block; border: solid 1px red;">                  
    <table style="width: 100%; table-layout: fixed;">
        <tr><td>&nbsp;</td></tr>
        <tr><td>Product 1</td></tr>
        <tr><td>Product 2</td></tr>
    </table>
</div></div>

JSFiddle: http://jsfiddle.net/yW6kp/1/。

これらをオーバーラップさせる必要がありますが、ラジオボタンのイベントも同様に発生させる必要があります。display: inline-block の代わりに 2 番目の div で display: block を使用することでこれを実現できますが、それらは重複しません。これは、IE 10 または IE 11 互換モードでは発生しません。誰か説明してくれませんか

4

3 に答える 3

3

追加してみませんか

pointer-events:none;

あなたの2番目のdivに？のように (コードを使用して)

<div>
<div style="display: block; border: solid 1px blue;">
    <table>
        <tr>
            <td><input id="rbl_0" type="radio" checked="checked"><label for="rbl_0">Option 1</label></td>
            <td><input id="rbl_1" type="radio"><label for="rbl_1">Option 2</label></td>
         </tr>
    </table>
</div>

<div style="margin-top: -23px; display: inline-block; pointer-events:none; border: solid 1px red;">                 
    <table style="width: 100%; table-layout: fixed;">
        <tr><td>&nbsp;</td></tr>
        <tr><td>Product 1</td></tr>
        <tr><td>Product 2</td></tr>
    </table>
</div>

それを使用すると、他の div をクリックして 1 日中使用できます。

于 2014-01-17T14:22:42.020 に答える
3

まず、なぜこれが起こっているのかを説明しましょう。背景色のない div がありますが、それはまだblock要素です。2 層のガラスの間に閉じ込められたスニッカーズ バーがあると想像してください。

おいしいスニッカーズバーが見えるかもしれませんが、固い物に手を突き刺してそれを手に入れるのに苦労するでしょう.

同じことがinputタグにも当てはまります。2 つのレイヤーの間にトラップされており、そのうちの 1 つはその親です。それらは背景を持っていないかもしれませんが、それはその背景を通過できるようにするわけではありません。

これがhtmlの外観です。

<div>
<div style="display: block; border: solid 1px blue;height: 35px;">

</div>

<div style="margin-top: -25px; display: inline-block; border: solid 1px red;">
    <table>
        <tr>
            <td><input id="rbl_0" type="radio" checked="checked" /><label for="rbl_0">Option 1</label></td>
            <td><input id="rbl_1" type="radio" /><label for="rbl_1">Option 2</label></td>
         </tr>
    </table>
    <table style="width: 100%; table-layout: fixed;">
        <tr><td>&nbsp;</td></tr>
        <tr><td>Product 1</td></tr>
        <tr><td>Product 2</td></tr>
    </table>
</div>

これがどのように機能するかを確認するための jsfiddleです。

于 2013-11-14T21:47:17.047 に答える
0

Internet Explorer 11 は、Firefox や Chrome と同じ方法でこの問題を処理しているようです。inline-block何が起こっているのか、また要素が隣接する入力フィールドの上に移動されたときにラジオ ボタンをクリックできない理由を説明するために、コードを少し変更しました。

ここに画像の説明を入力

最初の例では、input 要素自体が要素の背後に表示されinline-block、赤い要素の境界内からアクセスできないことがわかります。ただし、赤い要素の後ろから覗くので、入力要素の上半分をクリックすることができます。

対照的に、下の例は、2 番目の要素を から に変更した結果を示していinline-blockますblock。この例では、入力要素がブロック レベル要素の上に表示されます。これは、IE10 が例を処理する方法により似ているようです。

両者の違いについては、私にはよくわかりません。これは、アトミック インライン レベル ボックスが原因である可能性があります。これらのボックスは、ホストのインライン フォーマットに貢献し、それ自体にインライン フォーマットを持っています。ブロック要素はこれを行いません。

解決

この問題の解決策は、フォームが他の要素と重ならないようにすることですが、これは一般的に悪い習慣です。または、両方のコンテナーに相対的な位置を指定し、フォームをホストするコンテナーにより高い z-index を与えることができます。これにより、要素とそのすべてのコンテンツが赤いボックスの上に持ち上げられます。

.box {
    position: relative;
}

.higher {
    z-index: 1;
}

<div class="box higher"><!-- inputs --></div>
<div class="box"><!-- text --></div>

次のような結果になります。

ここに画像の説明を入力

これらの変更は、変更されたフィドルで利用できるようにしました。ぜひ探索してください。この問題をさらに調査するのに役立つ方法があれば教えてください。

フィドル: http://jsfiddle.net/yW6kp/11/show/

于 2013-11-16T21:16:38.100 に答える