フォームマージンがSafariでシフトされていますが、FirefoxとIEでうまく見えます

Question

ウェブサイトのページはwww.guardinglight.com/contact.html FirefoxとIEではサイトは正常に見えますが、Safariのフォームマージンが移動しています。 これは私のウェブサイトを初めて開発するときの助けになります。ありがとう。 HTML：

<div id="contact"> 
<div id="contact_form"> 
<form method="post" action="contactengine.php" id="commentForm">  
<fieldset> 
<h1 id="contact_text">Please fill out the from below and we will contact you shortly.</h1> 
<div id="formLeft"><label for="Name">Name:</label> 
<div class="input-bg"><input type="text" name="Name" id="Name" class="required"></div> 
<label for="Phone">Phone Number:</label> 
<div class="input-bg"><input type="text" name="Tel" id="Tel"></div> 
<label for="Email">Email:</label> 
<div class="input-bg"><input type="email" name="Email" id="Email" class="required email"></div> 
<label for="Message">Message:</label> 
<div class="message-bg"> 
<textarea name="Comment" id="Comment" rows="20" cols="20" class="required"> 
</textarea></div> 
<br> 
<input type="image" src="images/submit-button.png" name="submit" value="Submit" class="submit- button" alt="submit"></div> 
</fieldset> 
</form> 
</div>  

CSS：

#contact_form { 
width: 455px; 
margin: 10px 0px 20px 10px ; 
background: url(images/contact-form_bg.png) no-repeat; 
min-height: 600px; 

} 
form { 
padding: 0px 0px 0px 20px; 
margin: 0px 0px 0px 0px; 
} 
h1 { 
text-align: left; 
padding-top: 200px; 
} 
formLeft { 
width: 420px; 
float: left; 
    } 
input[type=text] { 
width: 400px; 
height: 30px; 
margin: 0 0 20px 0; 
border: none; 
text-align: left; 
background: #bebebe; 
margin: 0px 0 0 8px; 
font-size: 13px; 
font-family:Arial, Helvetica, sans-serif; 
    } 

input[type=email] { 
width: 400px; 
height: 30px; 
margin: 0 0 20px 0; 
border: none; 
text-align: left; 
background: #bebebe; 
margin: 0px 0 0 8px; 
font-size: 13px; 
font-family:Arial, Helvetica, sans-serif; 
} 

textarea { 
width: 400px; 
height: 190px; 
display: block; 
border: none; 
background: #bebebe; 
margin: 0 0 0 8px; 
padding: 0px 0 0px 0px; 
font-family:Arial, Helvetica, sans-serif; 
font-size: 13px; 
} 
label { 
display: block; 
font-size: 13px; 
text-indent: 10px; 
font-weight: bold; 
color:#333; 
margin: 10px 0px -3px 0px; 
font-family:Arial, Helvetica, sans-serif; 
position:relative; 
} 

label.error { 
color: red; 
font-style: italic; 
float: right; 
margin: 0px 0px 0px 0px; 
position:relative; 
left: -30px; 
top: -20px;   

} 


input[type=image] { 
float: right; 
padding-right: 31px; 
} 



#contact_social{ 
float: right; 
margin: -620px 100px 10px 0px; 
background: url(images/contact-info_bg.png) no-repeat; 
width: 316px; 
height: 416px; 

} 

ul#contact_social_list { 
width: 315px; list-style: none; float: right; overflow: hidden; margin: 100px 25px 0px 0px; 
} 
ul#contact_social_list li { 
    width: 260px; height: 54px; float: right; padding: 12px 0px 10px 0px; 

} 


#vr{ 
margin: -630px 0px 0px 500px; 
width: 4px; 
height: 611px; 
overflow: hidden; 
position: absolute; 
} 

Answer 1

form { display: block; } 

以上、パディングを設定するために#contact_formを使用しています。

#formLeftで浮動小数点数を使用しているため、#contact_formが終了する前に浮動小数点数をクリアすることができます。

<div id='contact_form'> 
    <!-- content --> 
    <div style='clear: both;'></div> 
</div> 

Answer 2

CSS resetを使用することをおすすめします。彼らは本当にマージンとパディングのクロスブラウザの不一致を助けることができます。

各ブラウザにはデフォルトスタイルのセットがあるため、サイトのスタイルを設定する前に、CSSリセットによって再生フィールドのレベルが調整されます。

This one Eric MeyerのEric Meyerは、ほとんどの不一致を捕らえています。