在当前稳定的 Chrome (48.0.2564.97) 中，将 html5 文档类型 ( <!DOCTYPE html> ) 添加到以下 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>
最佳答案
所以你在这里需要的是 box-sizing(附加 CSS 的前 3 行)。如果您使用旧代码通过 chrome 以外的浏览器查看，您会发现同样的问题会发生。 box-sizing 将在很大程度上解决这个问题——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>
有了它，您的文本框应该在任何浏览器中对齐。当然你可能想让它们比我做的更漂亮一点。
关于javascript - Chrome html5 文档类型更改输入宽度，但不选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35098871/