html - IE 开始输入文本框时将屏幕居中

Question

我正在设计一个应该没有滚动条的网站的一部分。非常简单的设计，在 Chrome 和 FF 中运行良好。但是当我在 IE 中测试它并开始在文本框中书写时，内容会跳起来并且似乎在该输入上居中屏幕，我不知道为什么。

See this JSFIDDLE

这是我的 HTML:

<div class="container">
        <div>
            <h1>
                Enter your name
            </h1>
        </div>
        <div>
            <p>
                Enter your name here!
            </p>
        </div>
        <div class="input-container">
            <input type="text" id="msisdn" />
        </div>
        
        <div class="button-container">
            <a href="#" class="button inactive" id="send-button">SUBMIT NAME</a>
        </div>
  </div>

这是我的 CSS:

html, body {
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

.container {
    width: 40%;
    display: block;
    text-align: center;
    margin: 0 auto;
}

body {
    background: #0f5082;
    color: #FFF;
}

h1 {
    margin-top: 20%;
    font-size: 56px;
    font-weight: bold;
    color: #FFF;
}

p {
    margin-top: 20px;
    padding-left: 15%;
    padding-right: 15%;
    font-size: 26px;
    word-spacing: 0.1em;
    font-weight: 300;
    color: #FFF;

}

.caps {
    text-transform: uppercase;
}

.input-container > input {
    background: transparent;
    margin-top: 40px;
    padding-top: 5px;
    padding-bottom: 6px;
    border: 1px solid #FFF;
    -ms-border-radius: 5px;
    border-radius: 5px;
    font-size: 24px;
    color: #FFF;
    text-align: center;
}

.button-container {
    margin-top: 40px;
    text-align: center;
}

.button {
    padding: 15px 20px;
    text-decoration: none;
    color: #FFF;
    font-size: 20px;
    background-color: #FA8845;
    -ms-border-radius: 5px;
    border-radius: 5px;
    letter-spacing: 0.03em;
}

.button:hover {
    color: #0f5082;
    -webkit-transition: all ease 0.2s;
    -moz-transition: all ease 0.2s;
    -ms-transition: all ease 0.2s;
    -o-transition: all ease 0.2s;
    transition: all ease 0.2s;
}

我想要的很简单，让屏幕保持在我输入文本框之前的状态。有谁知道，首先，它为什么这样做，其次我该如何避免？

提前致谢!马丁约翰逊

Answer 1

问题是由于

h1
{
   margin-top: 20%;
}

如下替换

h1
{
   margin-top: 90px;
}

希望能解决!