我不是网站管理员,甚至不是网络开发人员,但我的任务是向由 Some Else(TM) 开发的 Wordpress 网站添加内容。
我没有有效的权限来定义新的 CSS 规则,所以这都是内联样式。
这是一个说明问题的页面:http ://www.reginedagan.no/program/fiskekonkurranse-i-hovden/ 。
它在 Firefox 中显示得很好:
但是在IE9中,浮动的图片压低了下表中的文字,所以看起来很糟糕:
我在网上找到了一些相关的问题,例如“CSS: Float right in IE doesn't work!” 和“为什么浮动 DIV 会破坏表格定位?” , 那里的建议使我设置clear: none
在div
桌子周围,桌子本身,然后是每个人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 – 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 – 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 – 02.
Musikk: «Mister West», Steinar Aarsnes, Andøya. CC.
Salg av øl/vin og snacks.
</div>
VEL MØTT — 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 中的一个怪癖。
帮助?
(也许对标签也有帮助,我以前从未问过网络开发人员的问题?)