Содержимое div больше, чем div, когда ширина установлена равной 100%?

У меня есть div фиксированной ширины, содержащей только текстовое поле input и width того, что input установлено на 100%. Я ожидаю, что он заполнит div, но вместо этого он немного длиннее.

Демонстрационный код:

HTML:

<div class="container">
    <input class="content" id="Text1" type="text" />
</div>

CSS

.container
{
    width: 300px;
    height: 30px;
    border: thin solid red;
}
.content
{
    width: 100%;
}

Результат (Firefox):

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

Ответ 1

box-sizing: border-box - это быстрый и простой способ его исправить:

Этот будет работать во всех современных браузерах и IE8 +.

Вот демо: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

_{См. здесь для icky совместимого с IE7 метода.}

Ответ 2

Вам нужно reset прокладки, поля и границы. Если вы хотите применить его sitewide, вы можете использовать reset css, например Eric Meyer: http://meyerweb.com/eric/tools/css/reset/

Или вы можете написать свой собственный. Просто по умолчанию используйте свои собственные значения

Ответ 3

Также добавьте страницу CSS reset на страницу. на вкладке может быть добавлено дополнение!

Ответ 4

Когда я использую ваш код, он отлично отображается здесь, в Firefox. Я подозреваю, что у вас есть проблема со спецификацией: http://htmldog.com/guides/cssadvanced/specificity/

Или проблема с окружающим html. То есть незакрытый тег.

Попробуйте поместить этот CSS и HTML в простой файл, чтобы увидеть, правильно ли он отображается. Если это так, я предлагаю взглянуть на свойства CSS родительских элементов.

Если у вас его еще нет, загрузите панель инструментов веб-разработчиков для Firefox, затем используйте CTRL + SHIFT + F, чтобы включить отображение свойств интерактивного элемента. Это поможет вам отладить то, что происходит.

Надеюсь, что это поможет.