HTML5 - 带填充的文本输入太宽

Question

我想要一个input从里面填充的场地.我正在转移到HTML5.我在HTML 4.01 Transitional中工作,但在HTML5中,该input字段开始超出表框架.你能帮我纠正一下HTML吗？

HTML代码的一部分

<td class="content_listing_r" style="width: 80%;">
    <input type="text" name="model_search" style="width: 100%; padding: 5px"  autocomplete="off" />
</td>

它看起来像这样:

但应该看起来像这样:

这是一个小提琴,你可以看看并玩它:http://jsfiddle.net/kelu/DbXy5/5/

Answer 1

将此CSS 框大小规则添加到输入字段:

.content_listing_r input {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

jsFiddle例子

Answer 2

使用box-sizing: border-box

\n\n

    <input type="text" name="model_search" style="width: 100%; padding: 5px; box-sizing:border-box"  autocomplete="off" />\n

\n\n

带有供应商前缀

\n\n

box-sizing:border-box;\nwebkit-box-sizing: border-box;\n-moz-box-sizing: border-box;\n

\n\n

框大小：边框框

\n\n

添加：（如果可以的话，（Royi））

\n\n

-webkit-box-sizing: border-box; /* Android \xe2\x89\xa4 2.3, iOS \xe2\x89\xa4 4 */\n     -moz-box-sizing: border-box; /* Firefox 1+ */\n          box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */\n

\n