HTML5 鼠标点击时表单域移动

Question

我遇到了一个 IE11 的特定问题，这让我抓狂。这是表格的图片：

功能上没问题，但在 IE11 中，当用户单击右侧栏中的表单字段时，我遇到了问题。它将其下方左列中的输入字段向右移动：

除此之外，如果有人在左侧的字段中键入信息，则他们可以单击或按 Tab 键进入右侧的列，它会正常显示：

这是HTML：

<div class="container-border">
  <h2>Billing Address:</h2>
  <input id="search" name="search" placeholder="Start typing a postcode or address" type="text" value />
  <div class="left container-half">  
    <input id="firstname" name="firstname" placeholder="First name(s)" type="text" value />
  </div>
  <div class="right container-half">
    <input id="lastname" name="lastname" placeholder="Last name" type="text" value />
  </div>
  <div class="left container-half">
    <input id="address1" name="address1" placeholder="Address 1" type="text" value />
  </div>
  <div class="right container-half">
    <input id="address2" name="address2" placeholder="Address 2" type="text" value />
  </div>
  <div class="left container-half">
    <input id="city" name="town" placeholder="City" type="text" value />
  </div>
  <div class="right container-half">
    <input id="postcode" name="postcode" placeholder="Postcode" type="text" value />
  </div>
  <div class="left container-half">
    <select class="country" id="country" name="country">
      <option value="">Country</option>
      <option selected="selected" value="GB">United Kingdom</option>
    </select>
  </div>
</div>

这是CSS：

.left {
  float: left;
}

.right {
  float: right;
}

.container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 520px;
}

@media screen and (max-width: 520px) {
  .container {
    margin-left: 0;
    margin-right: 0;
  }
}

.container-half {
  width: 50%;
}

.container-half input[type="text"] {
  width: 90%;
  overflow: hidden;
}

.container-half select {
  width: 90%;
  overflow: hidden;
}

@media screen and (max-width: 520px) {
  .container-half {
    width: 100%;
    float: left;
  }

  .container-half input[type="text"],
  .container-half select {
    width: 100%;
    float: left;
  }
}

input[type="text"] {
  float: inherit;
  background-color : rgb(76, 171, 148); 
  box-shadow: none;
  border: none;
  width: 100%;
  padding: 12px;
  margin-top: 3px;
  margin-bottom: 3px;
  color: white;
}

select {
    padding: 12px;
    float: inherit;
    margin-top: 3px;
    margin-bottom: 3px;
    background-color: rgb(76,171,148);
    color: white;
    display: inline-block;
    border:none;
    width: 45%;
    box-shadow: none;
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box; 
    box-sizing:content-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor:pointer;
}

有人知道是什么导致 IE11 出现这种行为吗？在 FF 和 Chrome.

中外观很好

谢谢，

迈克

Answer 1

查看您的第二个屏幕截图（"moved" 屏幕截图），您可以看到 "Address 1" 字段比其他字段略小。看来，IE 的宽度百分比和边距像素有问题。因为您浮动了所有元素，所以我建议在每双行之后清除并在最后一行的右侧 "just in case" 添加一个空字段元素：

CSS:
.clearence
    {
        clear: both;
    }

HTML:
<div class = "container-border">
    <h2>Billing Address:</h2>
    <input id = "search" name = "search" placeholder = "Start typing a postcode or address" type = "text" value />
    <div class = "left container-half">
        <input id = "firstname" name = "firstname" placeholder = "First name(s)" type = "text" value />
    </div>
    <div class = "right container-half">
        <input id = "lastname" name = "lastname" placeholder = "Last name" type = "text" value />
    </div>
    <div class = "clearence"></div>
    <div class = "left container-half">
        <input id = "address1" name = "address1" placeholder = "Address 1" type = "text" value />
    </div>
    <div class = "right container-half">
        <input id = "address2" name = "address2" placeholder = "Address 2" type = "text" value />
    </div>
    <div class = "clearence"></div>
    <div class = "left container-half">
        <input id = "city" name = "town" placeholder = "City" type = "text" value />
    </div>
    <div class = "right container-half">
        <input id = "postcode" name = "postcode" placeholder = "Postcode" type = "text" value />
    </div>
    <div class = "clearence"></div>
    <div class = "left container-half">
        <select class = "country" id = "country" name = "country">
            <option value = "">Country</option>
            <option selected = "selected" value = "GB">United Kingdom</option>
        </select>
    </div>
    <div class = "right container-half">&nbsp;</div>
    <div class = "clearence"></div>
</div>

而且我认为您可以从文本字段中删除 "value"，如果您不在字段中输入...嗯，值就不需要了。

HTML5 鼠标点击时表单域移动

HTML5 Form fields moving on mouse click

html

css

internet-explorer-11