[Shitbox2]

Есть такой код:

<style>
P {
	position: relative;
}

.note {
	display: block;
	position: absolute;
	width: 100%;
	left: 100%;
	margin-top: -2.2em;
}
</style>

<table width="30%">
	<tr>
		<td>
		<P>Это непрерывный текст, а этому <b>месту</b><em class="note">
		<p>Примечание к месту</p>
		</em> в нем соответствует примечание</P>
		</td>
	</tr>
</table>

Если заменить в нем все прописные P, например, на div, то можно увидеть как он должен работать.

В оригинальном варианте все браузеры выполняют его по-другому, а именно, в соответствии с тем что показывает гуглхромовский инспектор:



Почему так происходит и как добиться правильного отображения не заменяя P на div?