HTML5表单字段在鼠标单击时移动

Question

我有一个IE11特定的问题让我疯了。这是表格的图像：

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

除此之外，如果有人在左侧的字段中输入信息，他们可以点击或标签到右侧列，它显示正常：

这是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

查看您的第二个屏幕截图（＆＃34;移动＆＃34;一个），您可以看到＆＃34;地址1＆＃34;字段比其他字段略小。看起来，IE有宽度百分比和px边距的问题。 因为你浮动你的所有元素，我建议在每一条双线之后清除并为右边的＃34添加一个空的字段元素;以防万一＆＃34;在最后一行：

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>

我认为你可以删除＆＃34;值＆＃34;从文本字段开始，如果您不在字段中输入......那么就不需要它。