Chrome html5 文档类型会更改输入的宽度，但不会更改选择

Chrome html5 doctype changes width of input, but not select

本文关键字：选择 输入 html5 文档 类型 Chrome      更新时间：2023-09-26

在当前稳定的Chrome(48.0.2564.97(中，在以下HTML前面加上html5文档类型(<!DOCTYPE html>(会改变<input>的宽度，但不会改变<select>。

<input>溢出右侧的<td>，但<select>不会。

  1. 为什么会这样？
  2. 我怎样才能防止它，但仍然使用 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>

这样，您的文本框应该在任何浏览器中对齐。当然，你可能想让它们比我漂亮一点。

相关文章：