jquery - jQuery Mobile 中文本输入的奇怪宽度

Question

我在 jQuery Mobile 中遇到了与文本输入宽度相关的奇怪行为 - 它太大了。

<div data-role="page">
    <div data-role="header">
        <h1>Test</h1>
    </div>

    <div data-role="content">
        <input type="text" value="192.168.1.1"></input>

        <a data-role="button">Connect</a>
    </div>
</div>

还可以通过减小浏览器窗口的宽度来重现此行为，例如在 jsFiddle 中。

jsFiddle:
http://jsfiddle.net/QxYMa/

这是正常行为还是只是一个错误？我怎样才能“纠正”这一点，以便文本输入和按钮具有相同的宽度？

Answer 1

输入和按钮自动应用了一些不同的 CSS。我添加了以下 CSS，这似乎使它们的 CSS 明显一致:

<div data-role="page">
    <div data-role="header">
        <h1>Test</h1>
    </div>

    <div data-role="content">
        <input type="text" value="192.168.1.1" style="width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing: border-box;"/>
        <br/>
        <a data-role="button" style="width:100%;margin:0">Connect</a>
    </div>
</div>

看起来输入框模型已关闭，按钮边距也已关闭。 这是一篇讨论盒模型的好文章，似乎对此有所启发:http://www.jefftk.com/news/2012-02-18.html

希望这有帮助!