我有一个包含标题和3个图像的代码块。当我在Chrome或Firefox上调整组件大小时，它会完美地调整到移动设备，但是当我在IE上测试所有版本时，它会达到610px左右，然后流畅地缩小以匹配屏幕宽度。相反，它会在底部创建一个滚动条。以前有人有过这个问题吗？
任何帮助将不胜感激。
<div class="wrapper">
<div class="st_ImagePanels">
<div class="fd_ImagePanels">
<div class="gp_ImagePanels">
<div class="in gradient-bg">
<div id="welcomeMsg">
<h1 id="welcome">Welcome, Optical!</h1>
</div>
<div id="imageWrapper">
<div class="cp_ImagePanel">
<div class="in">
<img src="http://placehold.it/465x260" alt="Image 1" />
</div>
</div>
<div class="cp_ImagePanel">
<div class="in">
<img src="http://placehold.it/465x260" alt="Image 2" />
</div>
</div>
<div class="cp_ImagePanel lastElement">
<div class="in">
<img src="http://placehold.it/465x260" alt="Image 3" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/* !== Global Rules */
/* !== Global Settings */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
/* !== Mixins */
/* !== Components */
html {
font-size: 16px;
height: 100%; }
body {
font-size: 100%;
font-family: 'Open Sans', sans-serif;
background: url("../images/bg.jpg") no-repeat;
background-size: cover;
display: table;
height: 100%;
width: 100%; }
@media (min-width: 1600px) {
body {
font-size: 140%; } }
@media (max-width: 991px) {
body {
font-size: 110%; } }
@media (max-width: 620px) {
body {
font-size: 80%; } }
.wrapper {
position: relative;
z-index: 10;
left: 0;
display: table-cell;
vertical-align: middle; }
[class*=st_] {
position: relative;
width: 100%; }
[class*=fd_] {
clear: both;
position: relative;
max-width: 73.125em;
margin: 0 auto; }
*, *:before, *:after {
box-sizing: border-box; }
h1 {
font-size: 1.75em;
display: block; }
h1 {
text-align: center;
margin-bottom: 0.625em;
font-weight: 600;
color: #fff;
text-transform: uppercase; }
.cp_LoginPanel {
width: 50%;
margin: 0 auto; }
@media (max-width: 991px) {
.cp_LoginPanel {
width: 100%;
padding: 0 3%; } }
.cp_LoginPanel .in {
border: 1px solid #c1c8cb;
border-radius: 10px;
color: #333;
line-height: 1; }
.cp_LoginPanel #topPanel {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background: #2f99cb;
padding: 1.25em 0.625em;
text-align: center;
margin-bottom: 1.875em; }
.cp_LoginPanel img {
width: 1.875em;
height: auto; }
#login-form {
padding: 0 1.875em 1.875em 1.875em; }
#login-form .inputBlock {
width: 100%;
display: block;
overflow: hidden;
margin-bottom: 1.25em;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; }
@media (max-width: 620px) {
#login-form .inputBlock {
display: block; } }
#login-form label {
width: 20%;
float: left;
margin-right: 5%;
text-transform: uppercase;
font-weight: 400;
color: #666; }
@media (max-width: 620px) {
#login-form label {
width: 100%;
margin-bottom: 0.3125em;
display: block; } }
#login-form label#error {
font-size: 0.875em;
color: #ff0000;
width: 100%;
display: block;
margin-bottom: 1.875em;
display: none; }
#login-form input {
width: 75%;
float: left;
padding: 0.3125em 0.625em;
border: 1px solid #ccc;
font-size: 1em;
background: #f9f9f9;
box-sizing: border-box; }
@media (max-width: 620px) {
#login-form input {
width: 100%;
margin: 0; } }
#login-form input:focus {
border: 1px solid #2f99cb;
box-shadow: none;
outline: none; }
#login-form input[type="submit"] {
width: 100%;
cursor: pointer;
background: #2f99cb;
color: #fff;
float: none;
font-weight: 600;
font-size: 1em;
line-height: 1;
padding: 0.9375em;
text-transform: uppercase;
border: 1px solid transparent;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear; }
#login-form input[type="submit"]:hover {
background: none;
color: #2f99cb;
border-color: #ccc; }
.st_ImagePanels {
padding: 3.125em 0; }
.gp_ImagePanels {
width: 50%;
margin: 0 auto; }
@media (max-width: 991px) {
.gp_ImagePanels {
width: 100%;
padding: 0 5%; } }
.gp_ImagePanels > .in {
border: 1px solid #c1c8cb;
border-radius: 10px;
overflow: hidden; }
#welcomeMsg {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background: #2f99cb;
padding: 1.25em 0.625em;
text-align: center;
margin-bottom: 1.875em; }
#welcomeMsg h1#welcome {
margin: 0;
}
#imageWrapper {
padding: 0 1.875em 1.875em 1.875em;
overflow: hidden; }
.cp_ImagePanel {
width: 30%;
float: left;
margin-right: 5%; }
@media (max-width: 620px) {
.cp_ImagePanel {
width: 100%;
text-align: center; } }
.cp_ImagePanel:last-of-type {
margin: 0; }
@media (max-width: 620px) {
.cp_ImagePanel:last-of-type img {
margin-bottom: 0; } }
.cp_ImagePanel img {
max-width: 100%;
height: auto; }
@media (max-width: 620px) {
.cp_ImagePanel img {
margin-bottom: 1.25em; } }
.gradient-bg {
background: #ffffff;
/* Old browsers */
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ffffff 0%, #f1f1f1 100%);
/* Chrome10-25,Safari5.1-6 */
background: -webkit-linear-gradient(315deg, #ffffff 0%, #f1f1f1 100%);
background: linear-gradient(135deg, #ffffff 0%, #f1f1f1 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1',GradientType=1 );
/* IE6-9 fallback on horizontal gradient */ }