Javascript 文本框宽度问题——即_Javascript_Jquery_Html_Css_Internet Explorer

Javascript 文本框宽度问题——即

javascript jquery html css internet-explorer

Javascript 文本框宽度问题——即,javascript,jquery,html,css,internet-explorer,Javascript,Jquery,Html,Css,Internet Explorer,我试图在文本框上设置100%的宽度，但它会延伸到容器。。我已经检查了一些类似的问题，但似乎没有解释为什么会出现问题。。我知道手动设置属性，但我需要找出为什么会发生这种情况。我必须用100%的财产价值 <body> <form id="form1" runat="server"> <div style="border:1px solid gray;"> <input type="text" style

我试图在文本框上设置100%的宽度，但它会延伸到容器。。我已经检查了一些类似的问题，但似乎没有解释为什么会出现问题。。我知道手动设置属性，但我需要找出为什么会发生这种情况。我必须用100%的财产价值

   <body>
     <form id="form1" runat="server">
        <div style="border:1px solid gray;">
            <input type="text" style="width: 100%;"  id="title"/>

        </div>

    <div>
    <a href="#" id="postfile" style="float:left;">Post</a><span style="display:none;  border:1px solid #ee1100; margin-left:10px; color:#cc1100" id="errormessage"></span>
    </div>

</form>

添加

框大小：边框框

。它太宽的原因是您当前将内容设置为100%宽度，但添加了填充和边框。

尝试在输入上使用框大小调整

<input type="text" style="width: 100%; box-sizing: border-box;"  id="title"/>

此外，最跨浏览器的方式是：

<input type="text" style="width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"  id="title"/>

IE中

的默认边框样式使其位于容器div之外。逻辑输入为100%宽，但默认边框会为其添加额外的宽度。您可以尝试添加

边框：10px纯绿在任何浏览器中发送给您

<input type="text" style="width: 100%; border:10px solid green;"  id="title"/>

它可以装在集装箱里。我希望这能有所帮助。
是的……正如Kolink所建议的那样，文本框的边距、边框和填充不是零。因此它的宽度为100%。因此，通过使用框大小：边框框元素上指定的任何填充或边框都在指定的宽度和高度内布局和绘制
您是否使用重置样式表，如果不尝试重置样式表，则需要更多上下文，即整个HTML文档。理想情况下，您应该显式设置容器的宽度，以控制其子容器的%宽度，但我理解这是否是一种可行的方法。容器没有指定宽度。你能提供更多的上下文吗？似乎还有更多的事情你没有提到，这是asp.net表单。我相信你也必须添加padding-right:2px到容器div，因为输入元素（左+右）的水平边框宽度之和为2px。有一个小提琴，请检查出来谢谢Omid。。你能解释一下这是为什么吗。。长方体大小调整的作用是什么长方体大小调整属性允许您定义某些元素以某种方式适合某个区域。看看
<input type="text" style="width: 100%; border:0;"  id="title"/>