考虑这个 HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<table cellspacing = "10" cellpadding="0" border="1" width="100%">
<tr>
<td>
<input style="border-width:1px; border-style:solid; width:100%; background-color:aqua">
</td>
</tr>
</table>
</html>
它输出以下内容，如您所见，右侧有一点重叠。
如何更改此代码，使输入框在不重叠的情况下占据 TD 的整个内部空间？
请注意，我正在寻找一种解决方案，其中:
- DOCTYPE标签和html标签如上所述。
- 如上所述，容器元素的大小不是固定的。
谢谢。
最佳答案
在输入标签的样式元素上添加 box-sizing: border-box 解决了这个问题，正如 JamWaffles 所提到的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<table cellspacing = "10" cellpadding="0" border="1" width="100%">
<tr>
<td>
<input style="box-sizing: border-box; border-width:1px; border-style:solid; width:100%; background-color:aqua">
</td>
</tr>
</table>
</body>
</html>
关于html - 在 HTML 中，如何使控件占据其容器的所有水平空间而不重叠边框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12058312/