表格邊距在Safari中移動，但在Firefox和IE瀏覽器中看起來很好

有問題的網頁是www.guardinglight.com/contact.html 該網站在Firefox和IE中看起來不錯，但Safari中的表格邊距正在轉移。這是我第一次開發一個網站，任何幫助將不勝感激。謝謝。的HTML：表格邊距在Safari中移動，但在Firefox和IE瀏覽器中看起來很好

<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; 
}

來源

2012-02-22 Mike Sanchez

form { display: block; }

或更好，使用#contact_form設置填充。

由於您在#formLeft中使用了浮點數，因此您可能希望在#contact_form結束之前將其清除。

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

來源

2012-02-22 19:15:02 feskr

您可能要考慮使用CSS reset。他們可以真正幫助跨瀏覽器與margin和padding的不一致。

由於每個瀏覽器都有一組默認樣式，因此在對網站進行樣式設置之前，CSS會重置級別。

This one來自Eric Meyer擅長捕捉大多數不一致的地方。

來源

2012-02-22 20:30:08 plntxt

表格邊距在Safari中移動，但在Firefox和IE瀏覽器中看起來很好

回答

相關問題