Question

在当前稳定的Chrome（48.0.2564.97）中，将html5文档类型（<input>）添加到以下HTML会更改<select>的宽度，但不会更改<input>的宽度。

<td>溢出右侧的<select>，但<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>没有。

为什么会这样？
如何阻止它，但仍然使用html5？

HTML：

$arr2[0]->a

Answer 1

所以你需要的是盒子大小（附加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>

这样你的文本框应该在任何浏览器中排成一行。当然你可能想让它们比我更漂亮。

Chrome html5 doctype会更改输入的宽度，但不会选择

1 个答案: