Абсолютное позиционирование в 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% идентичен - во всех браузерах. Вы пробовали этот подход и обнаружили, что он не адекватен? Так, в чем проблема?