Установка полей TEXTAREA и INPUT на 100% ширины внутри TD усекает правое поле

Question

Пожалуйста, помогите мне решить эту проблему.Я хотел бы установить ширину элементов INPUT и TEXTAREA равной 100%, чтобы они полностью соответствовали ячейке таблицы, но я заметил, что правая граница обрезана.

Я попытался обернуть INPUT внутри DIV и установить«переполнение» на «скрытое», когда я читаю другие ответы, но это не работает:

<div style="overflow:hidden">
    <input class="input_field" type="text" />
</div>

Я также устанавливаю поля и отступы, а также ширину = 95%, но правая граница всегда обрезается, даже еслиэто хорошо внутри TD.

Пожалуйста, смотрите HTML и CSS код на jsFiddle .Посмотрите внимательно на правую границу элементов, вы увидите, что они усечены.Установите 'table border = 0', чтобы лучше видеть.

Answer 1

Используйте box-sizing: border-box (и соответствующие версии браузера):

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

См. http://jsfiddle.net/trwut/4/

Связанные чтения: http://paulirish.com/2012/box-sizing-border-box-ftw/

Answer 2

В спецификации CSS указано, что ширина элемента не включает границу; что может быть рассмотрено как неправильное и усложняет ширину в сценариях, подобных вашему.

Как ни странно, Internet Explorer пошел против этой спецификации CSS и использовал так называемую блочную модель (ширина, включая границу) - которая в то время вызывала головную боль, но теперь может применяться к другим браузерам с использованием следующего CSS:

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Чтобы поддержать мой ответ (так как upvote был удален), вы можете прочитать следующую статью:

Месть IE Box Модель Джефф Кауфман