html - 在 IE11 中将响应页面宽度从 640px 调整为 1117px 会导致对齐不正确

Question

我在这里创建了以下响应页面:http://asapuat1.bigredsky.com/mjb_v2.htm?cid=290&jbid=184

对于 640px 到 1117px 的宽度，我有一个 2 x 2 布局，顶部和底部行有 1 个间隔 div，以确保正确对齐。输入字段的边距设置为 %，输入字段本身也有 % 宽度，最大宽度为 280 像素。

所有这一切在 Firefox 和 Chrome 中运行良好，但在 IE11 中，由于通过拖动浏览器窗口调整宽度大小，垂直对齐方式发生变化，并且输入字段不再正确垂直对齐。

我怀疑间隔 div 可能会导致问题，需要时在其上显示设置为内联 block ，不需要时设置为无。

奇怪的是，当我遇到关闭默认 css box-sizing 的问题时:通过开发者工具修复继承，但再次重新调整窗口大小，问题仍然存在

如有任何反馈，我们将不胜感激。

Answer 1

问题已通过在输入字段上使用以像素为单位的边距值而不是百分比来解决，并且只为 IE 11 使用 css:

例如

@media only screen and (max-width:69.75em) and (min-width:55em) and     (-ms-high-contrast:none)
input[type='text'], input#mjb-ico-search, 
#topSpacer1, #bottomSpacer1, #topSpacer2, #bottomSpacer2,   #middleSpacer1,    #middleSpacer2, select {
margin: 20px 44px;
}
}