Question

链接到我的网站：http://foxweb.marist.edu/users/kf79g/contact.php

我的联系页面遇到问题。无论屏幕尺寸如何（即使您将窗口调整到最小的宽度），我希望整个事物都能够居中和响应。注意：除非您找到一种方法使表单宽度更大且响应更快，否则请将大/桌面屏幕保留为我希望它的外观。我试图让整个页面以中小屏幕为中心。但是，随着页面缩小，中心属性测量值略有下降。这样做的原因是有些必须是不同的，以便它对旧版浏览器看起来不错。社交图标也给我带来了麻烦。有没有办法让整个设备和浏览器都集中在一起？我尽力测量。任何帮助将不胜感激。

以下是我想解决的问题：

火狐：在中等页面上，表单超出范围。在小页面上，当页面很小时，表单会缩小。在小页面上，社交图标搞砸了。在中小页面上，表单不会均匀居中。

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

Answer 1

我建议使用Element Inspector在页面上看到正确的外观。所有现代浏览器都包含它们似乎所有你需要的是这里和那里的小CSS调整。例如，您可以在小型和中型布局中将输入设置为不同的宽度（第116行更改为width:90%）。

正确理解盒子大小及其工作方式非常重要。似乎复合边距和填充是导致元素溢出的原因。 http://css-tricks.com/box-sizing/

如何使此页面上的所有内容都集中并对所有浏览器完全响应？

1 个答案: