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

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

javascript css html google-chrome

Javascript Chrome html5 doctype更改输入的宽度，但不更改选择,javascript,css,html,google-chrome,Javascript,Css,Html,Google Chrome,在当前稳定的Chrome（48.0.2564.97）中，将html5 doctype（）前置到以下HTML会更改的宽度，但不会更改的宽度溢出右侧的，但没有溢出为什么会发生这种情况我如何防止它，但仍然使用html5 HTML: .输入单元格>*{ 宽度：100%； } 因此，这里需要的是框大小（附加CSS的前3行）。如果你在chrome以外的浏览器中查看旧代码，你会发现同样的问题也会发生。盒子大小将在很大程度上解决这个问题-除了铬。啊！这是由于设置了chrome默认框。要解决这个问题，您必

在当前稳定的Chrome（48.0.2564.97）中，将html5 doctype（

）前置到以下HTML会更改

的宽度，但不会更改

的宽度

溢出右侧的

，但

没有溢出

为什么会发生这种情况

我如何防止它，但仍然使用html5

HTML:


.输入单元格>*{
宽度：100%；
}

因此，这里需要的是框大小（附加CSS的前3行）。如果你在chrome以外的浏览器中查看旧代码，你会发现同样的问题也会发生。盒子大小将在很大程度上解决这个问题-除了铬。啊！这是由于设置了chrome默认框。要解决这个问题，您必须定义输入的填充、边距、高度和边框（接下来的4行附加代码）


.输入单元格>*{
宽度：100%；
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
边框：1px实心#000000；
填充：0；
保证金：0；
身高：100%；
}

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


.输入单元格>*{
宽度：100%；
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
边框：1px实心#000000；
填充：0；
保证金：0；
身高：100%；
}

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

你能解释一下“预加doctype”是什么意思吗？你是在动态添加还是什么？如果是，怎么做？我的意思是，如果我有一个html文件在第一行有doctype，与另一个html文件相比，除了doctype不在其中之外，其他html文件完全相同。你能澄清“预加doctype”是什么意思吗？你是在动态添加还是什么？如果是，怎么做？我的意思是，如果我有一个html文件的第一行有doctype，而另一个html文件则完全相同，只是doctype不在其中。谢谢你的回答。我只针对Chrome，因为它是用于内部应用程序的<代码>框大小：边框框自己为我修复了它。最后4个属性是不必要的。它们只是输入和选择以外的元素所必需的吗？或者我不知何故遗漏了一些他们为输入和选择而解决的问题？很抱歉，我想你可能只是在chrome上进行测试，并计划在其他地方进行测试。不，我敢肯定，如果你只使用chrome浏览器，你会接受的。最后4行只是为了消除浏览器之间可能出现的任何不规则现象。谢谢你的回答。我只针对Chrome，因为它是用于内部应用程序的<代码>框大小：边框框自己为我修复了它。最后4个属性是不必要的。它们只是输入和选择以外的元素所必需的吗？或者我不知何故遗漏了一些他们为输入和选择而解决的问题？很抱歉，我想你可能只是在chrome上进行测试，并计划在其他地方进行测试。不，我敢肯定，如果你只使用chrome浏览器，你会接受的。最后4行只是为了消除浏览器之间可能存在的任何不规则。

<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>

<!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>