0

私は一種の広告置換スクリプトに取り組んでいます。次のように、タグ内に広告が表示されることがあります。

<tr>
  <td align="right" width="40%"><a><img src="ad.jpg"></a></td>
  <td>123</td>
</tr>

キッカーは、広告の表示値を変更できないことです。この演習では、不透明な div でオーバーレイする必要があります。この div は絶対に配置する必要があり、マージンやフロートなどを継承する必要があります。

広告が div 内で見つかり、たまたま左または右にフローティングされている場合、適切な left:0; を使用してその上に div を配置します。または右:0; css 属性は非常に簡単です。ただし、広告が td によってスタイル設定されている場合、td に position:relative; が追加されていても、Firefox は広告を正しくレンダリングしないようです。スタイル。

Chrome\IE では次のように表示されます: (灰色のセルは最初の td、赤はオーバーレイ、内側のボーダレス セルはオーバーレイされる iframe です。オーバーレイされているため、よく見えません。 :) ) ここに画像の説明を入力

Firefox では次のように表示されます。 ここに画像の説明を入力

オーバーレイのコードは非常に単純です...

<div style="right:0;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;position:absolute;z-index:9999;background:red;width:300px;height:280px;"></div>

...そして、問題の td の先頭に追加されています。

右:0; プロパティは、相対的に配置するように命令されているにもかかわらず、td の内側から完全に発射させています。

ここで何が欠けていますか?

4

2 に答える 2

1

次のフィドルのように、position:relative ラッパー div を追加できます: http://jsfiddle.net/qfquj/

于 2012-06-11T01:09:31.570 に答える