0

考虑这个 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>

它输出以下内容，如您所见，右侧有一点重叠。

在 IE 和 Chrome 中输出

如何更改此代码，以使输入框占据 TD 的整个内部空间而不会重叠？

请注意，我正在寻找一种解决方案，其中：

  • DOCTYPE 标记和html 标记如上所述。
  • 如上所述，容器元素的大小不是固定的。

谢谢你。

4

1 回答 1

1

正如 JamWaffles 所提到的，在输入标签的样式元素上添加 box-sizing:border-box 解决了这个问题。

<!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>
于 2012-08-21T15:48:24.597 回答