我正在设计一个 100% 宽度和 10px 填充的文本输入,如下所示:
<div class="wrapper">
Outer element
<form method="get" id="searchform" action="#">
<input type="text" class="field" name="s" id="s" placeholder="Search here...">
<input type="submit" class="submit" name="submit" id="searchsubmit" value="GO">
</form>
</div>
CSS:
.wrapper {
background: #ccc;
padding: 20px;
width: 200px;
}
#s {
width: 100%;
display:block;
padding: 10px;
}
#searchsubmit {
display: block;
width: 100%;
padding: 10px;
}
问题是文本输入超出了包装的宽度。请参见此处的示例。
我尝试添加“box-sizing:border-box”和-moz-box-sizing:border-box”但我仍然看到输入在某些浏览器(例如Android)上超过100%。
有针对这个的解决方法吗?