2009-06-03 2 views
0

これはすべて、要求されない限り一部のコンテンツを非表示にする方法が必要なときに開始されました。私は既にいくつかのツールチップのためのリンク:ホバー(hover)メソッドを使用しており、この目的のためにそれを適応させることに亀裂を入れたいと思っていました。アンカータグ内のIframe。ええ、私は知っています。 IEレンダリングの問題

自分のサイトの性質上、携帯電話での使用に適しています.JSがサポートされていても、読み込みが目立つし、失敗した場合はサイトを苛立たせることがありますつかいます。

私はタイムスタンプ生成のURLを持つアンカータグのdivタグにiframeを持っています。実際にはiframeを隠してIEに読み込まないようにしていたので、代わりに「visited」状態になるまで高さを0に設定しました。もともと私はdivを使用しましたが、リンクの属性が引き継がれていたので、フレームを導入しました。 FFでは、これは期待どおりに機能しました(リンクが存在しないフレームの要素にリンクステータスを適用するのはなぜですか?(さらに、「なぜアンカータグで最初にフレームをラップするのでしょうか? ? "は十分に有効です))、IEでは、リンクされた状態は部分的にフレームの機能と干渉します。

カーソルは正常ですが、フレーム内の何かをクリックしようとすると、通常のURL表示ポインタが短く表示されます。フレーム内のリンクは正常に機能しますが、フォームは扱いにくいです。フレーム内の2回目のクリックでフォームフィールドにのみキャレットを設定できます。最初のクリックはフレームにフォーカスを置くようです。その後フォームフィールドへのクリックが十分に機能します。最後の注意点は、ユーザーがフォームフィールドに入力したテキストを含め、iframe内でマウスで選択できるものは何もないことです。

私はz-indexを使って遊んだことがありませんし、訪問時にリンク自体の表示を非表示に設定しようとしました(これはうまくいったが、私はまだ動かないIEで-pretend - 私は、リンクの動作

思考

関連するコード:? HTML:

<a id="t-l" href="#<?php 
echo time(); 
?>a" class=hidebox>save/share<div><iframe src="addtoany.php?pageID=1962460927" frameborder=0></iframe></div></a> 

CSS:

.hidebox {} 
.hidebox iframe {height: 0px; width: 300px; background-color:#393242;} 
.hidebox:visited {} 
.hidebox:visited div {width:300px; height:400px; padding: 10px 0px 0px 10px;} 
.hidebox:visited iframe {height: 400px; width: 285px; border: 0px solid #393242; margin: 0px auto 0px auto;} 
+0

多くの説明がありましたが、実際のコードを提供することができますので、他の人には明らかに何が起こっているのかは明らかです –

+0

関連するHTMLとCSSを追加しました。 –

答えて

1

インライン要素内にブロック要素を入れ子にしたり、dom操作ロジックにcssを使用したりしないでください。なぜ、javascriptのソリューションを持っていないのですか?これにより、ブラウザーの癖に頼らずに、適切に構造化された文書と必要な機能を使用できるようになります。

関連する問題