Question

我有这段代码：

<p><a href="#">Blah</a> | <span>stuff</span><span>1</span><span>dfh5heh</span> | June 17, 2010 <a href="#" style="float:right;">46884</a></p>

这非常简单，但它在IE8和Firefox 3中的呈现方式不同。我认为它在IE8中呈现的不正确而不是Firefox。

上面的代码列出了P中的一些内容，如下所示：

------------------------------------------------------------
Blah | stuff1dfh5heh | June 17, 2010                   46884
------------------------------------------------------------

在IE8中，46884的东西在底部边框下面滑落，留下了两个问题。

我该如何解决这个问题？我猜我需要使用div而不是p标签。
IE8（Firefox？）中的哪种机制会产生这种错误的渲染。

编辑：我仔细检查了我在IE中的模式，发现由于某种原因我处于兼容模式。切换到正确的模式“IE8标准”后，该错误被消除。我还是想知道如何修复IE7用户的错误？

Answer 1

确保您的文档在DOCTYPE中标识为HTML 4.01严格。

Answer 2

<div style="width:90%"><a href="#">Blah</a> | <span>stuff</span><span>1</span><span>dfh5heh</span> | June 17, 2010
 <a href="#" style="float:right;display:inline">46884</a></div>

试试这个。

M在linux上工作，因此无法在IE中进行测试。但是如果上面的代码不起作用，请使用giv text-align：right来锚定标记而不是右移。

Answer 3

尝试以下代码：

HTML

<div style="width:100%; height:50px; border-top:1px dashed #000;border-bottom:1px dashed #000;">
<a class="anch" href="#">Blah</a>
<div class="sep"><!-- --></div>
<span class="info">Stuff</span>
<span class="info">1</span>
<span class="info">dfh5heh</span>
<div class="sep"><!-- --></div>
<span class="info">June 17, 2010</span>
<a class="right_anch" href="#">46884</a>
</div>

CSS

.anch{float:left; display:inline-block;}
.sep{float:left; display:inline; margin-left:10px; margin-right:10px; width:1px; height:12px; background-color:#000; margin-top:5px;}
.info{float:left;}
.right_anch{float:right; display:inline-block;}

确保为包含整个事物的div设置高度或最小高度，我在上面的例子中有50px ...

HTML / CSS Float在<p> </p>内

3 个答案: