浮动右图在IE9中按下表中的文字

Question

我不是网站管理员，甚至不是网络开发人员，但我的任务是将内容添加到由Someone Else（TM）开发的Wordpress网站。

我没有有效的权限来定义新的CSS规则，所以它都是内联样式。

以下是说明问题的页面：http://www.reginedagan.no/program/fiskekonkurranse-i-hovden/。

它在Firefox中表现得很好：

但在IE9中，浮动的图片按下表中的文字按下，所以它看起来很糟糕：

我在网上发现了一些相关问题，例如： "CSS: Float right in IE doesn't work!"和"why does a floating DIV mess up table positioning?"，我的建议让我在桌子周围的clear: none，桌子本身，然后每个人div和tr上设置td最后甚至对每个人width="99%"。我还在桌面上设置margin-right: -3px，并尝试（但我不知道如何正确）应用IE6 quirk fix <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! 。

所以这里是用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" 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>

生成的HTML提供给浏览器（仅限相关的第一部分）：

clear: right

通过在表格上设置clear: none，我可以使用更简单的代码重现效果。但是，我无法使用默认样式或{{1}}（如上所述）重现效果。所以似乎可能是Wordpress所做的事情，或者它可能是主题事物或其他任何东西 - 但它与其他人所观察到的非常相似，所以有强烈迹象表明它也是一个怪癖IE。

帮助？

（或许也有助于标签，我以前从未问过网络开发人员的问题？）

Answer 1

改为使用绝对定位。

取浮动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使用坐标样式定位（右侧和顶部属性）完全独立于其他内容的位置

将包含表格的div设置为position：relative;确保图像div相对于容器定位。

填充h1标签将确保您的文字在以前的位置打破。

如果有效，请告诉我。

干杯。