我有一个包含在div中的html元素.高度由外部div决定,输入控件的高度和宽度为100%.在最基本的层面上,我遇到的问题是文本框超出了包含div的权限.
基本示例代码:
<div style="height:25px; width: 150px;">
<input type="text" style="height:100%; width:100%" />
</div>
Run Code Online (Sandbox Code Playgroud)
这个控件的渲染比这复杂得多,但是当控制被剥离到这个级别时,我还有一个问题,即文本框突出了包含div.
我希望找到一个资源来排列HTML页面中的输入元素.我发现即使使用宽度样式属性也很难将选择元素和文本框设置为相同的宽度,并且在浏览器中更难以实现.最后,文件输入似乎无法达到相同宽度的跨浏览器.是否有任何好的指南或提示来完成这个?也许我应该设置一些默认的CSS属性.
我意识到它<input type="submit"/>有一个border-box盒子模型,而<input type="text"/>有一个content-box盒子模型.IE8和FF中存在此行为.不幸的是,这阻止了我将这种风格用于漂亮的均匀大小的输入:
input, textarea
{
border: 5px solid #808080;
padding:0px;
background-color:#C0C0C0;
width:20em;
}
Run Code Online (Sandbox Code Playgroud)
这是IE和FF的正确行为吗?是否存在跨浏览器解决此问题的方法?