Question

我已经在http://s394436795.websitehome.co.uk/careforall/和Chrome＆amp; 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％相同。你尝试过这种方法并发现它不够用吗？是这样，它有什么问题？

Firefox中的绝对定位

1 个答案: