Firefox中的绝对定位

Question

我在http://s394436795.websitehome.co.uk/careforall/ 建立了这个网页，在 Chrome 和 Safari 中看起来还可以，但在 Firefox 中它就坏了。

CSS 和 HTML 非常简单，我已经为大多数 DIV 设置了绝对位置，但这不是最好的处理方式吗？我以为是……

例如，“老年护理”部分的 HTML 是这样的：

<div id="elderlycare">
<h2>Elderly Care</h2>
<p class="elderlycare1">In the many years Aggie has worked as a care worker, she has seen first hand that elderly people prefer the familiar surroundings of their own home and frequently it is a companion that is needed rather than a care company that only supply the basics.</p>
<p class="elderlycare2">Aggie has dedicated her time to a number of clients over the years and prides herself on getting to know them individually. By building friendly and close relationships, she allows you to get that essential break knowing your family is safe and happy in their own home.<br /><br />Aggie is patient, easy to talk to and benefits from being a qualified carer. Not only can she offer company for your relatives, she is able to help professionally with personal hygiene and</p>
<p class="elderlycare3">oversee dietary and nutritional needs. She is also able to provide transportation, be it to or from a train station, an appointment or just a trip to the local shop.<br /><br />A comprehensive meeting with Aggie will be essential before booking in order for her to meet your relative and assess their needs. Please contact her for details.</p>
</div>

和 CSS：

#elderlycare h2 {
font-family: 'BebasRegular', Arial, sans-serif;
letter-spacing: 0;
text-transform: uppercase;
font-size: 28px;
color: #515f7f;
font-weight: normal;
}
#elderlycare {
width: 460px;
position: relative;
top: 75px;
left: 320px;
padding: 55px 0 0 0;
margin: 0;
}
.elderlycare1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #515f7f;
margin: 0 150px 0 0;
}
.elderlycare2{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #515f7f;
margin: 35px 0 0 130px;
}
.elderlycare3{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #515f7f;
margin: 25px 150px 0 0;
}

可以做些什么来确保所有 DIV 可以在所有浏览器中绝对定位在正确的位置。老实说，这是一个相当尴尬的设计，但希望你能帮助我解决这个问题。

谢谢

Answer 1

我明白您想要达到的目标，但您面临一些重大障碍。相同的字体规范不会在不同的浏览器上以相同的方式呈现，因此如果您在这种程度上对位置进行微观管理，您将始终存在差异。您的方法也放弃了 CSS 最强大的属性之一；自动流动内容的能力。考虑到这一点，我只能看到将图像和水平分隔线作为页面背景的一部分的缺点。

我会通过使用适当的填充来浮动图像并让文本在它们周围流动来接近这种设计。水平分隔器可以很容易地定位在每个部分之间。结果在所有浏览器中看起来都差不多 - 但不是 100% 相同。您是否尝试过这种方法并发现它不够用？是这样，有什么问题吗？