看看这些屏幕截图:
https://i.stack.imgur.com/1TFuj.png https://i.stack.imgur.com/1TFuj.png
https://i.stack.imgur.com/3fukT.png https://i.stack.imgur.com/3fukT.png
当设置为“宽度: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>
这是第二个的代码(注意样式完全相同的 select 元素如何不受影响):
<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;
}
.项目.标题
{
向左飘浮;
宽度:25%;
}
.项目.内容
{
向左飘浮;
宽度:67%;
}
.项目.确认
{
向左飘浮;
宽度:8%;
}
.item.确认img
{
左内边距:.3em;
高度:1.1em;
}
.项目小时
{
明确:两者;
可见性:隐藏;
填充:0;
保证金:0;
}
.项目选择
{
宽度:100%!重要;
字体大小:0.9em;
}
.项目输入
{
宽度:100%!重要;
字体大小:0.9em;
}