链接到我的网站： http: //foxweb.marist.edu/users/kf79g/contact.php
我的联系页面有问题。无论屏幕大小如何（即使您将窗口大小调整到最小可能的宽度），我都希望整个事物都能居中并做出响应。注意：不要管大/桌面屏幕，这就是我希望它看起来的样子，除非您找到一种方法来使表单宽度更大且响应更快。我试图使整个页面以中小屏幕为中心。然而，随着页面的缩小，中心属性测量值有所偏离。这样做的原因是有些必须不同，以便它看起来适合旧版浏览器。社交偶像也给我带来了麻烦。有什么方法可以使整个事情以所有设备和浏览器为中心？我尽我最大的努力进行测量。任何帮助将非常感激。
以下是我希望解决的问题：
Firefox：在中等页面上，表单超出范围。在小页面上，当页面较小时，表单会缩小。在小页面上，社交图标一团糟。在中小页面上，表格的中心不均匀。
IE 7：在中页和小页上，社交图标乱七八糟。在小页面上，表单超出范围。表单在小屏幕上并没有缩小。在中小页面上，表格的中心不均匀。
IE 8：在小页面上，表单正在缩小。在中小页面上，表格的中心不均匀。社交图标并没有那么糟糕。
HTML：
<section>
<div id='main_section'>
<div id = "center">
<div id='details_section'>
<br/>
<h2> Stay in touch </h2><br/>
<p>I love getting feedback regarding all my projects, works, and services. You can use the quick contact form to leave a message, comments and questions.</p><br/>
<p>Your name and e-mail address are never shared, I just use them when I need to get back to you.</p><br/>
<h2> Social networks </h2><br/>
<div id = "center_icons">
<a href="https://www.facebook.com/lenny.pfautsch" target="_blank"><img src="images/facebook.png" alt="facebook" style="margin:1px;"></a>
<a href="https://plus.google.com/113122168458946246215/posts" target="_blank"><img src="images/google-plus.png" alt="google plus" style="margin:1px;"></a>
<a href="http://www.linkedin.com/pub/leonard-pfautsch/53/b34/1a2" target="_blank"><img src="images/linkedin.png" alt="linkedin" style="margin:1px;"></a>
<a href="https://github.com/LeonardPfautsch" target="_blank"><img src="images/github.png" alt="github" style="margin:1px;"></a>
</div>
<br/>
</div>
</div>
<div id = "center">
<div id='contact_section'>
<form method='POST' action='contact.php'>
<span class='label'>Name:</span><br/>
<input type='text' class='textfield' name='name' size='50' maxlength='50'><br/>
<span class='label'>Email:</span><br/>
<input type='text' class='textfield' name='email' size='50' maxlength='50'><br/>
<span class='label'>Subject:</span><br/>
<input type='text' class='textfield' name='subject' size='50' maxlength='50'><br/>
<span class='label'>Message:</span><br/>
<textarea rows='5' cols='50' name='message' id='textarea' maxlength='500'></textarea><br/>
<input type='submit' value='Send' id='submit' name='action'>
</form>
</div>
</div>
</div>
</section>
主要CSS：
#details_section {
max-width:100%;
float:left;
margin-right:20px;
}
#contact_section {
max-width:100%;
margin-bottom:40px;
margin-right: 0px;
margin-top:20px;
padding:20px; /*Make this smaller for 100% responsiveness*/
border-radius:10px;
background:#f1f1f1;
box-shadow:0px 0px 15px #272727;
float:right;
}
#submit {
padding:0px 8px;
background:#c4c4c4;
width:115px;
height:33px;
border-radius:10px;
border:1px solid #8d8d8d;
max-width:100%;
}
#submit:hover {
background:#a8a8a8;
cursor: pointer;
}
div.button input {
padding:0px 8px;
background:#c4c4c4;
width:80px;
height:30px;
border-radius:10px;
border:1px solid #8d8d8d;
margin:1px;
max-width:100%;
}
div.button input:hover {
background:#a8a8a8;
cursor: pointer;
}
大屏幕：
#details_section {
width:320px;
}
中等屏幕：
#center{
width: 465px;
display: block;
margin-left: auto;
margin-right: auto;
}
#center_icons{
width: 228px; /*this value is changing for IE and chrome*/
display: block;
margin-left: auto;
margin-right: auto;
}
#contact_section {
width:450px;
}
#details_section {
width: 450px;
text-align:justify;
}
#details_section h2 {
width: 450px;
text-align:center;
}
textarea, input[type="text"] {
width: 100%;
max-width: 450px;
}
textarea{
max-width: 450px;
height: 150px;
}
小屏幕：
#center{
width: 465px;
display: block;
margin-left: auto;
margin-right: auto;
}
#center_icons{
width: 228px; /*this value is changing for IE and chrome*/
display: block;
margin-left: auto;
margin-right: auto;
}
#contact_section {
width:450px;
}
#details_section {
width: 450px;
text-align:justify;
}
#details_section h2 {
width: 450px;
text-align:center;
}
textarea, input[type="text"] {
width: 100%;
max-width: 450px;
}
textarea{
max-width: 450px;
height: 150px;
}