0

私は IE 8/7 で奇妙な問題に遭遇し、問題を示す最小限のテストケースに到達するために地獄を (そして戻って) 行きました...

次の HTML について考えてみましょう。

<form id="hover-test">
  <fieldset>
    <div id="hover">
       <p>always visible</p>
       <p class="hidden">Visble only on hover</p>
    </div>  
  </fieldset>

  <fieldset>
    <a href="#" id="link">Please jump</a>
  </fieldset>
</form>

そして、このCSSのビット:

form                 { background-color:#f5f5f5; }
.hidden              { display:none; }
#hover:hover .hidden { display:block; }
#link                { position:relative; }

すべきこと:カーソルを合わせると追加の段落が表示され、次のフィールドセットとそのすべてのコンテンツが押し下げられます。(FF/Chrome/Safari/Opera では正常に動作します)

IE 7/8 での動作: 段落が表示され、次のフィールドセットが押し下げられます。ただし、リンクは、私には理解できない理由で固定されたままです。

問題を再現する最小限のマークアップを求める苛立たしい追跡の中で (元のコードから 1 行の CSS を削除すると効果は消えましたが、テストケースにはそれらが含まれていても問題ありません... O_o)、少なくとも 3 つを特定しました。ここで一緒に働くプレイヤー:

  1. フィールドセット：すべてをdivまたはフィールドセットなしのフォームに配置すると、すべてうまくいきます
  2. position:relative: その行のコメントを外すと出来上がり - リンクがジャンプします。
  3. 背景色：これは私にはまったく意味がありませんが、これがなくても機能します。

それで、ここに質問があります（暗黙の「WTF？」は別として）：

この動作の原因について何か手がかりはありますか? そして、それを解決する方法は？または少なくとも、多くの既知の IE の問題のうち、さらにテストするために調べることができるヒントはありますか?

多分私は構造を曲げる方法を考え出すことができます...たとえば...追加のラッパーdivまたは何かに背景色を持たせることができますが、これは...ややばかげているようです.とにかく、そうではないように感じます.これを今理解すると、将来的に非常に複雑になる可能性があります。

4

1 に答える 1

2

position: relativeそれを解決するのに役立ったのは、についてのあなたのコメントでした。それは私に考えるようにフラグを立てましたhasLayout！両方を確認し、レイアウトも設定すると、問題は解決したようですform（fieldset作成#linkされた問題にそれを渡すだけです）。1つの（多くの）方法：

form, fieldset {zoom: 1}

作業フィドルを参照してください。

ところで:#hoverコードに 2 つの ID を含めないでください。それはクラスに設定する必要があります（あなたの例では単なるエラーかもしれませんが、私はそれに注意したかったのです）。

于 2012-07-13T17:12:31.157 に答える