iphone - 提交按钮的长度与 iPhone 模拟器中的输入字段的长度不同
<p><p>我希望我的文本字段和按钮跨越整个屏幕大小，但文本字段和按钮的长度不同，即使它们使用相同的 CSS 选择器。</p>
<p>这是代码:<a href="http://jsfiddle.net/AakN4/2/" rel="noreferrer noopener nofollow">http://jsfiddle.net/AakN4/2/</a> </p>
<p>在 Safari 中差异不大，但仍然可见。</p>
<h2>结果</h2>
<p>具有定义的像素宽度的左侧<br/>
宽度为 100% 的 Rigth(文本字段的长度应与按钮的长度相同)。</p>
<p> <a href="http://i.minus.com/jUbh0W0aVWFMl.png" rel="noreferrer noopener nofollow">http://i.minus.com/jUbh0W0aVWFMl.png</a> </p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>为您的输入定义 <strong>box-sizing</strong>。像这样写:</p>
<pre><code>input {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 15pt;
width: 150px;
}
</code></pre>
<p>查看 <a href="http://jsfiddle.net/AakN4/4/" rel="noreferrer noopener nofollow">http://jsfiddle.net/AakN4/4/</a> </p>
<p>差异的原因是 <code>input type="submit"</code> 默认像 <code>box-sizing</code> 一样工作。它完全包含 <code>padding & border</code> 和 <code>width</code> & <code>input type="text"</code> 添加 <code>padding & border</code> 与它的完全<code>宽度</code>。</p></p>
<p style="font-size: 20px;">关于iphone - 提交按钮的长度与 iPhone 模拟器中的输入字段的长度不同，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/11756345/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/11756345/
</a>
</p>
页:
[1]