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

Глядя на ваш второй скриншот (далее «переехал» один), вы можете увидеть, что поле «Адрес 1» немного меньше, чем в других областях. Кажется, IE имеет проблему с шириной в процентах и ​​маржи в px. Поскольку вы плывете все элементы, я хотел бы предложить, чтобы очистить после каждой двойной линии и добавить пустой элемент поля для правых «на всякий случай» в последней строке:

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> 

И я думаю, что вы можете удалить «значение» из текстовых полей, оно не нужно, если вы не ставите ... ну, значения в полях.