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会在您设置网站样式之前重置游戏区域。

来自Eric Meyer的

This one非常擅长捕捉大多数不一致的内容。

表单边距在Safari中移动但在Firefox和IE中看起来很好

2 个答案: