看看这些截图:
http://i.stack.imgur.com/1TFuj.png
http://i.stack.imgur.com/3fukT.png
当设置为'width:100%'时,我无法按预期显示文本输入。文本框向右延伸太远,超过第一个屏幕截图中的右边距,并在第二个屏幕截图中超过div的右边距。
这是移动Safari中的错误吗?如果是这样,有人可以建议解决方法吗?它似乎在其他移动浏览器和桌面版Safari中都能正常工作。问题似乎仅限于输入元素,因为选择元素在以完全相同的方式设置时似乎具有适当的宽度。
提前感谢您的帮助!
以下是第一个屏幕截图的代码:
<div style="padding-left: 1em; padding-right: 1em;">
<div style="font-size: 1.2em;">
Username:
</div>
<div>
<input type="text" style="width: 100%; font-size: 1.1em;" id="tbUsername" name="tbUsername">
</div>
</div>
这是第二个代码(请注意选择元素的样式,完全相同的方式,如何解决):
<div class="item">
<hr />
<div class="title">Group Name</div>
<div class="content">
<asp:TextBox ID="tbGroupName" runat="server">
</asp:TextBox>
</div>
<div class="confirmation">
<img alt="" src="../Graphics/Check-icon.png" runat="server" id="imgConfirmGroupName"/>
</div>
<hr />
</div>
这是CSS:
.item
{
padding-top: .5em;
padding-bottom: .5em;
border-left: 1px solid black;
border-bottom: 1px solid black;
padding-left: 0.5em;
}
.item .title
{
float: left;
width: 25%;
}
.item .content
{
float: left;
width: 67%;
}
.item .confirmation
{
float:left;
width: 8%;
}
.item .confirmation img
{
padding-left: .3em;
height: 1.1em;
}
.item hr
{
clear: both;
visibility: hidden;
padding: 0;
margin: 0;
}
.item select
{
width: 100% !important;
font-size: 0.9em;
}
.item input
{
width: 100% !important;
font-size: 0.9em;
}
答案 0 :(得分:32)
输入上的this property可能会对您有所帮助吗?
input[type="text"]{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}