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

希望这可以帮助!