0

ページをスキャンしてキーワードを検索し、それらを強調表示し、ユーザーがそれらの上にカーソルを合わせると、AJAX と PHP を使用して入力されるツールチップを作成するブラウザー スクリプトに取り組んでいます。私が遭遇した唯一の問題は、ツールチップが表示される Web サイトの CSS がツールチップ コンテンツの CSS と干渉していることです。

ツールチップでは<img>、<p>および<table>と を<tr>使用し<td>ます。PHP ファイルは、CSS ファイルでスタイル設定した ID を使用してこれらの要素をエコー バックします。私の CSS はウィキペディアなどの一部のサイトでは適切に表示されますが、他のサイトではパディング/マージン/配置が乱れます。たとえば、特定の Web サイトが<td>中央に配置される場合がありますが、私は左に配置したいと考えています。使用する ID の多くには、既に「!important」を追加しています。

質問: Web サイトの CSS がツールチップのスタイルに干渉しないようにするにはどうすればよいですか?

4

1 に答える 1

2

idできることの 1 つは、ツールチップ コンテナーにを使用することです。

一意でなければならないことを覚えておく必要がありますid。したがって、ページに 2 つのツールチップを表示してはなりません。

<div id="my-tooltip-2986234">
    the content of the tooltip
</div>

次に、cssファイルに対して次のようなものを作成します。

#my-tooltip-2986234 * {
     /*reset all style properties here (you can take this of a css reset script)*/
}

ida の重み は this のないルールよりも高いため、idツールチップ コンテナー内の外部ページのすべてのスタイルを上書きする必要があります。

また、ツールチップのすべてのルールにプレフィックスを付ける必要がありますid。

#my-tooltip-2986234 a {
     /*style for your a*/
}

!important確かに、外部サイトのルールにまだ問題がある可能性があります. しかし、そのようにスタイリング コードを作成すると、競合が最小限に抑えられます。!importantルールにルールを追加することを考えることができます。しかし、少なくとも私が作成したものについては、ルールの前に を付けるidだけで十分でした。

もう 1 つの解決策 (上記ほど洗練されていません) はiframe、コンテンツを書き込むコンテナーを作成することです。そうすれば、CSS ルールを完全にサンドボックス化できます。しかし、私はiframe長い間使用していなかったので、さまざまなブラウザーの落とし穴がどこにあるのか今のところわかりません (一部のブラウザーで問題を引き起こしていたクロスドメイン ポリシーのため、iframeなしでを作成する必要があります)。 src.

于 2013-10-14T06:58:09.540 に答える