HTML / CSS Float прямо внутри <p>

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 скользит под нижней границей, что оставляет мне два вопроса.

1. Как мне это исправить?Я предполагаю, что мне нужно использовать div вместо тега ap.
2. Какой механизм в IE8 (Firefox?) Производит этот некорректный рендеринг.

Редактировать: я дважды проверял, в каком режимеЯ был в IE и обнаружил, что я был в режиме совместимости по какой-то причине.При переходе в правильный режим «Стандарты IE8» эта ошибка устраняется.Я все еще хотел бы знать, как исправить ошибку для пользователей IE7?

Answer 1

<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: вправо для привязки тега вместо float right.

Answer 2

попробуйте следующий код:

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 в примере выше ...

Answer 3

Убедитесь, что ваш документ идентифицирует себя как HTML 4.01 Strict в DOCTYPE.