How to solve the problem of layout (positioning) in IE?

Question

css

Good afternoon. Faced the problem of layout under IE.
The site in Chrome, FF, Opera browsers looks like this:
Link to image
A in IE11 browser like this:
Link to the
CSS image of the registration block:

#registration_bl {                          /*    главный div для блока регистрации    */
  position: absolute;
  margin-top: 40%;
  margin-left: -40%;
  
  left: 50%;
  width: 80%;
        height: 0%;
}

#reg_cell {         /*    родительский div для поля ввода и кнопки отправки    */
  position: relative;
  height: 100%;
  width: 66%;
        left: 50%;
        margin-left: -33%;
}

#email_field {                          /*    поле ввода    */
  position: relative;
  width: 82%;
  padding: 5px;
  border: solid white;
  border-width: 0.2em;
  
  background: transparent;
  color: #a7a7a7;
  outline:none;
  font-family: HelveticaNeueCyr_Light;
  font-size: 1.5em;
}

.bSend {                          /*    Соответственно, кнопка отправки    */
  position: absolute;
  height: 100%;
  width: 15%;
  font-size: 1.8em;
  border: 0px solid;
  background: #ffffff;
        outline: none;
}

PS: reset.css is included. Also a link to codepen , but it's slightly incorrect there.

Answer 1

Please tell me why you started doing all this in absolutes? Why is float: left for both elements not nice? Well, or display: inline-block, and set the parent to font-size: 0 and they will again be back to back. Everywhere.