开始键入文本框时IE中心屏幕上的文字框

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

这是我的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; 
}

我要的是简单的，有画面停留时间只是因为它是我之前在文本框中键入。有谁知道，首先，为什么它这样做，其次，我怎么能避免它？

在此先感谢！马丁·约翰逊

来源

2015-12-29 Martin Johansson

我只是试图在我的IE浏览器，它似乎没有任何问题。你确定这是由IE或其他东西引起的吗？ – dtmnn

与@dtmnn一起，我也无法看到使用IE11的问题。你使用什么版本？ – redditor

我也使用IE11。你没有看到小提琴顶部的标题跳起来了吗？我也在IE11上试了一个同事的电脑，它的工作原理应该如此。我无法理解为什么它会为我做到这一点。 –

问题是由于

h1 
{ 
    margin-top: 20%; 
}

替换此如下

h1 
{ 
    margin-top: 90px; 
}

我希望它会解决这个问题！

来源

2015-12-29 11:25:51

完美，这工作！非常感谢！那么，教训是要避免利润率上升？ –

开始键入文本框时IE中心屏幕上的文字框

回答

相关问题