У кого-нибудь есть решение этой проблемы с макетом в IE?

Question

Ниже приведена ссылка на выпуск макета. Кто-нибудь знает, почему он так выглядит в IE и исправление для него? то есть почему текстовое поле выходит за пределы внешнего div? Это нормально как в Chrome, так и в Firefox.

http://nothing123.s3.amazonaws.com/test-ie.htm

Вот HTML.

<style>
  #loginBox {
    width: 336px;
    border: 1px solid red;
    padding: 5px;
  }
  #loginEmail {
    border: 1px solid blue;
    padding: 5px;
    width: 100%;
  }
</style>

<div id="loginBox">
  <input type="text" id="loginEmail"/>
</div>

Answer 1

Это из-за #loginEmail padding 5px. Удалите это и используйте дополнение верх + низ. и используйте text-indent: 5px, чтобы переместить текст в 5x влево;

Answer 2

Это потому, что вы добавили ширину 100% с отступом 5px к #loginEmail.Заполнение: 5px добавляет ширину, которая затем становится более 100%, и, следовательно, она истекает из div.Чтобы решить эту проблему, необходимо указать ширину в пикселях или отступ в процентах.например,

#loginEmail {
    border: 1px solid blue;
    padding: 1%;/*total 2% for left(1%) and right(1%) padding*/
    width: 97%;/*97 + 2%(padding) = 99%*/
  }

OR

#loginEmail {
    border: 1px solid blue;
    padding: 5px;
    width: 300px;
  }

Answer 3

добавление этого стиля CSS в #loginEmail устраняет проблему

box-sizing: border-box;

Answer 4

Он имеет все, что связано с блочной моделью.

Фактическая #loginBox фактическая ширина равна ширине + отступы + граница.Ваш loginBox теперь 348px (336+ (5x2) + (1x2)):

Теперь #loginEmail установлен на 100% относительно его родительской ширины, которая будет 348px.Теперь добавьте его отступ и границу, он станет 360px.Поскольку внутренняя часть #loginBox составляет всего 336px, естественно, она кровоточит.

быстрое решение состоит в том, чтобы добавить box-sizing:border-box к #loginEmail, чтобы оно не кровоточило (чтобы онограницы и отступы в нем 100%).Однако это поддерживается только в IE8 +.

Для получения дополнительной информации об этом свойстве и о том, какие браузеры его поддерживают, проверьте эту страницу