Firefoxでの絶対配置

Question

このウェブページはhttp://s394436795.websitehome.co.uk/careforall/とChrome &で作成しました。Safariは大丈夫ですが、Firefoxでは壊れています。

CSSとHTMLはかなり単純ですが、私は絶対位置でDIVのほとんどを設定しましたが、これは最善の方法ではありませんか？

<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：：私は

例えば

、 '高齢者介護' のセクションのためのHTMLはこれです...ので、仮定

#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の最も強力な属性の1つを放棄しています。コンテンツを自動的にフローする機能そのことを念頭に置いて、ページの背景の一部として画像と水平分割線を持つことには不利な点しか見られません。

私は、このデザインにアプローチするには、画像を適切なパディングで浮かべて、テキストを周囲に流すようにします。水平ディバイダは、各セクション間に簡単に配置することができます。結果は、すべてのブラウザで同じように見えますが、100％同一ではありません。あなたはこのアプローチを試して、それが十分ではないことを見つけましたか？それで、どうしたの？