在当前稳定的Chrome(48.0.2564.97(中,在以下HTML前面加上html5文档类型(<!DOCTYPE html>
(会改变<input>
的宽度,但不会改变<select>
。
<input>
溢出右侧的<td>
,但<select>
不会。
- 为什么会这样?
- 我怎样才能防止它,但仍然使用 html5?
.HTML:
<html>
<head>
<style>
.input-cell > * {
width: 100%;
}
</style>
</head>
<body>
<form>
<table>
<tr><td class="input-cell"><input name="note" type="text"></td></tr>
<tr><td class="input-cell"><select name="formatted"><option></option></select></td></tr>
</table>
</form>
</body>
</html>
所以你需要的是盒子大小(附加CSS的前3行(。如果您使用旧代码查看chrome以外的浏览器,您会发现会发生相同的问题。盒子大小将在很大程度上解决问题 - 除了 chrome。啊!这是由于设置了镶边默认框。要解决此问题,您必须定义输入的填充、边距、高度和边框(接下来的 4 行附加代码(。
<!DOCTYPE html>
<html>
<head>
<style>
.input-cell > * {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing:border-box;
border: 1px solid #000000;
padding: 0;
margin: 0;
height: 100%;
}
</style>
</head>
<body>
<form>
<table>
<tr><td class="input-cell"><input name="note" type="text"></td></tr>
<tr><td class="input-cell"><select name="formatted"><option></option></select></td></tr>
</table>
</form>
</body>
</html>
这样,您的文本框应该在任何浏览器中对齐。当然,你可能想让它们比我漂亮一点。