Question

首先，我将向您展示窥视并解释事情

chrome，一切都很好：

http://puu.sh/rLTy1/e2a8a98e21.png - 这是未聚焦的输入，正确显示 http://puu.sh/rLTzA/2d38154c13.png - 专注，仍然很好

与mozilla完全相同，gg wp

介绍IE：

边缘，随着页面加载完毕，未聚焦 http://puu.sh/rLTCZ/a449447d4d.png - 您可能会注意到thext略有偏移 http://puu.sh/rLTEU/c5160b5e8d.png - 在我选择一次后，它会跳到正常位置并保持原样

这也适用于从边缘模拟的11个10和9个版本

但如果我在实际的11中加载它 http://puu.sh/rLTJR/e7c71c6749.png - 在页面完成加载时未聚焦 http://puu.sh/rLTLk/dab069b0ab.png - 在我专注之后，它就像这样。关闭但没有雪茄IE

与实际11

中的模拟10和9版本相同

为什么上帝，为什么会这样？

<div class="header__search">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Keyword or model#">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Go</button>
                </span>
            </div>
....
</div>

输入的HTML

和它的SASS

.header__search
  position: relative
  padding: 15px 25px

  background: #c9e1bc

  .input-group
    width: 31.5%

    input
      box-shadow: none
      height: 35px
      line-height: 35px
      font-size: 12px
      border-color: #538c53

    button
      max-height: 35px
      background-color: #6a9b6a
      border: 1px solid #538c53
      font-size: 12px
      padding: 8px 12px
      color: #FFFFFF
      border-radius: 0

    button:hover
      background-color: #5e945e
      border-color: #3b7c3b
      color: #FFFFFF

    input
      border-radius: 0

    button
      border-radius: 0

  iframe
    position: absolute
    top: 50%
    right: 68px
    margin-top: -9px



.header__search__input
  float: left

  height: 30px

  padding: 0 10px

  min-width: 200px

  border: none
  outline: none

  border-radius: 3px 0 0 3px

.header__search__button
  padding: 5px 12px

  color: #FFFFFF
  font-weight: bold

  outline: none
  border: none

  border-radius: 0 3px 3px 0

  background: #DEA72D


.header__search__button:hover
  background: #B98718

我也使用bootstrap，因为有些人可能已经注意到了。 3.3.6版本

为什么我的输入占位符文本会在IE中跳转？

0 个答案: