Проблема была объяснена ранее, поэтому я только повторюсь: ширина не учитывает границы и отступы. Один из возможных ответов на этот вопрос, который не обсуждался, но который я нашел, выручил меня кучу - это обернуть ваши данные Вот код, и я объясню, как это помогает в секунду:
<table>
<tr>
<td><div style="overflow:hidden"><input style="width:100%" type="text" name="name" value="hello world" /></div></td>
</tr>
</table>
DIV, обертывающий INPUT, не имеет отступов и границ. Это решение. DIV расширится до размера своего контейнера, но также будет учитывать границы и отступы. Теперь у INPUT не возникнет проблем с расширением до размера своего контейнера, поскольку он не имеет границ и не содержит площадок. Также обратите внимание, что для DIV переполнение установлено на скрытый. Похоже, что по умолчанию элементы могут выходить за пределы своего контейнера с видимым переполнением по умолчанию. Это просто гарантирует, что ввод остается внутри своего контейнера и не пытается пробиться сквозь него.
Я проверял это в Chrome и в Fire Fox. Кажется, что оба хорошо уважают это решение.
ОБНОВЛЕНИЕ : Так как я только что получил случайное понижение, я хотел бы сказать, что лучший способ справиться с переполнением - это атрибут размера блока CSS3, как описано у priceco:
.myinput {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
Это, кажется, довольно хорошо поддерживается основными браузерами и не является "хакерским", как трюк с переполнением. Однако в современных браузерах с таким подходом есть некоторые незначительные проблемы (см. http://caniuse.com/#search=box-sizing Известные проблемы).