3

我不是网站管理员,甚至不是网络开发人员,但我的任务是向由 Some Else(TM) 开发的 Wordpress 网站添加内容。

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

这是一个说明问题的页面:http ://www.reginedagan.no/program/fiskekonkurranse-i-hovden/ 。

它在 Firefox 中显示得很好:

Firefox 按我的预期呈现

但是在IE9中,浮动的图片压低了下表中的文字,所以看起来很糟糕:

在此处输入图像描述

我在网上找到了一些相关的问题,例如“CSS: Float right in IE doesn't work!” “为什么浮动 DIV 会破坏表格定位?” , 那里的建议使我设置clear: nonediv桌子周围,桌子本身,然后是每个人tr,最后甚至是每个人td。我还摆width="99%"在桌子上,并尝试(但我不知道如何正确)应用 IE6 quirk fix 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 中的一个怪癖。

帮助?

(也许对标签也有帮助,我以前从未问过网络开发人员的问题?)

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 回答