3

私はウェブマスターではなく、ウェブ開発者でもありませんが、Someone Else（TM）によって開発されたWordpressサイトにコンテンツを追加する任務を負っています。

新しいCSSルールを定義するための効果的なアクセス権がないため、すべてインラインスタイルです。

問題を説明するページは次のとおりです：http：//www.reginedagan.no/program/fiskekonkurranse-i-hovden/。

Firefoxではうまく表示されます。

Firefoxは私が期待するようにそれをレンダリングします

しかし、IE9では、浮かんだ画像が下の表のテキストを押し下げたため、かなりひどいように見えます。

ここに画像の説明を入力してください

Webでいくつかの関連する質問を見つけました。たとえば、「CSS：IEでのフロートは機能しません！」などです。と「フローティングDIVがテーブルの配置を台無しにするのはなぜですか？」、そしてそこでの提案により、私はテーブルclear: noneのdiv周り、テーブル自体、そして各個人tr、そして最後に各個人にさえ設定するようになりましたtd。私もwidth="99%"テーブルにセットして、IE6の癖の修正を適用しようとしました（しかし、どのように正しくはわかりません）margin-right: -3px。

失敗した修正を含む、Wordpressで書かれたコンテンツは次のとおりです。

<h1><div style="float: right"><a href="http://www.reginedagan.no/?attachment_id=671"><img src="http://www.reginedagan.no/wp-content/uploads/2012/06/fiskekonkurranse-2011-bilde-3-nedskalert.jpg" alt="Fra fiskekonkurransen i 2011" title="Fra fiskekonkurransen i 2011" width="200" height="242" class="size-full wp-image-671"/></a></div>Fiskekonkurranse i Hovden!</h1>
<div style="background-color: #FAF0F0; clear: none;"><table width="99%" style="clear: none; right-margin: -3px;">
  <tr style=" clear: none;">
    <td style="text-align: left; clear: none;">Dato:</td>
    <td style="text-align: left; clear: none;">Lørdag 21.juli</td>
  </tr>
  <tr style=" clear: none;">
    <td style="text-align: left; padding-left: 2em";  clear: none;>/ barn, Flytebrygga</td>
    <td style="text-align: left; clear: none;">15.00 &ndash; 16.00</td>
  </tr>
  <tr style=" clear: none;">
    <td style="text-align: left; padding-left: 2em;  clear: none;">/ voksne (over 12 år), Moloen</td>
    <td style="text-align: left; clear: none;">15.00 &ndash; 17.00 </td>
  </tr>
  <tr style=" clear: none;">
    <td style="text-align: left; clear: none;">Sted:</td>
    <td style="text-align: left; clear: none;">Hovden</td>
  </tr>
  <tr style=" clear: none;">
    <td style="text-align: left; clear: none;">Pris:</td>
    <td style="text-align: left; clear: none;">voksen (over 12 år) kr. 50,-, barn kr. 30,-</td>
  </tr style=" clear: none;">
  <tr>
    <td style="text-align: left; clear: none;">Arrangør:</td>
    <td style="text-align: left; clear: none;">Hovden Grendelag</td>
  </tr>
</table></div>

Velkommen til den årlige Fiskekonkurransen i Hovden lørdag 21. juli!

<a href="http://www.reginedagan.no/program/fiskekonkurranse-i-hovden/fiskekonkurranse-2011-bilde-nedskalertjpg/" rel="attachment wp-att-672"><img src="http://www.reginedagan.no/wp-content/uploads/2012/03/fiskekonkurranse-2011-bilde-nedskalertjpg.jpg" alt="Fra fiskekonkurransen i 2011" title="Fra fiskekonkurransen i 2011"  width="400" height="267" class="alignleft size-full wp-image-672" /></a>Det blir stangfiske fra moloen og egen barnekonkurranse fra flytebrygga.

Premiering for størst fisk, størst antall kg og flest antall stk. Premiering for barn kl. 16:30 på moloen. Alle premieres. Premiering for voksne på festen om kvelden.

Salg av pølser og brus, vafler og kaffe, samt sluker.

<div style="clear: left; border: 1px dashed gray; padding: 1em;">
Fest på Hovden samfunnshus kl. 21 &ndash; 02. 
Musikk: «Mister West», Steinar Aarsnes, Andøya. CC.
Salg av øl/vin og snacks.
</div>

VEL MØTT &mdash; SKITT FISKE!

そして、結果のHTMLはブラウザに提供されます（関連する最初の部分のみ）：

<h1>
<div style="float: right;"><a href="http://www.reginedagan.no/?attachment_id=671"><img src="http://www.reginedagan.no/wp-content/uploads/2012/06/fiskekonkurranse-2011-bilde-3-nedskalert.jpg" alt="Fra fiskekonkurransen i 2011" title="Fra fiskekonkurransen i 2011" class="size-full wp-image-671" height="242" width="200"></a></div>
<p>Fiskekonkurranse i Hovden!</p></h1>
<div style="background-color: rgb(250, 240, 240); clear: none;">
<table style="clear: none;" width="99%">
<tbody><tr style="clear: none;">
<td style="text-align: left; clear: none;">Dato:</td>
<td style="text-align: left; clear: none;">Lørdag 21.juli</td>
</tr>

テーブルにセットすることで、よりシンプルなコードで効果を再現することができclear: rightます。ただし、デフォルトのスタイルまたはclear: none（上記の）では効果を再現できません。つまり、Wordpressが行っていることかもしれないし、テーマやそれが何をしているのかということかもしれませんが、他の人が観察したことと非常に似ているので、IEの癖でもあるという強い兆候があります。

ヘルプ？

（おそらくタグにも役立ちます。これまでWeb開発者に質問したことはありませんか？）

4

1 に答える 1

4

代わりに絶対配置を使用してください。

フローティング div を取得し、テーブルを含む div 内に配置すると、次のようになります。

<div style="background-color: rgb(250, 240, 240); clear: none;">

    <div style="float: right;"><a href="http://www.reginedagan.no/?attachment_id=671"><img src="http://www.reginedagan.no/wp-content/uploads/2012/06/fiskekonkurranse-2011-bilde-3-nedskalert.jpg" alt="Fra fiskekonkurransen i 2011" title="Fra fiskekonkurransen i 2011" class="size-full wp-image-671" height="242" width="200"></a></div>

    <table style="clear: none;" width="99%">
    ...
    </table>

</div>

css スタイルを少し変更して、このようにします。(私の最新のコメントを反映するように編集されています)

<div style="background-color: rgb(250, 240, 240); clear: none; position:relative;">

    <div style="position:absolute;right:0px;top:-120px;z-index:50;"><a href="http://www.reginedagan.no/?attachment_id=671"><img src="http://www.reginedagan.no/wp-content/uploads/2012/06/fiskekonkurranse-2011-bilde-3-nedskalert.jpg" alt="Fra fiskekonkurransen i 2011" title="Fra fiskekonkurransen i 2011" class="size-full wp-image-671" height="242" width="200"></a></div>

    <table style="clear: none;" width="99%">
    ...
    </table>

</div>

h1タグにもスタイルプロパティを与えます

<h1 style="padding-right:200px;"> ... </h1>

div の絶対位置をより安定させます。画像を含む div は、座標スタイルの配置 (right プロパティと top プロパティ) を使用して、他のコンテンツとは完全に独立して位置を取得します。

テーブルを含む div を position:relative; に設定します。画像 div がコンテナーに対して相対的に配置されるようにします。

h1 タグをパディングすると、テキストが以前の場所で改行されるようになります。

それがうまくいくかどうか教えてください。

乾杯。

于 2012-06-28T22:45:48.857 に答える