如何将<Input>提交按钮设置为文本大小答案

【问题标题】：How to set<Input> submit button to size of text如何将<Input>提交按钮设置为文本大小
【发布时间】：2012-06-05 15:29:17
【问题描述】：

我正在使用 jquery mobile 并且有一个带有提交按钮的表单。不幸的是，在做了一些研究之后，我了解到 jquery mobile 的 data-inline 属性不适用于输入元素。我希望提交按钮只是其文本的大小。 Firefox 必须注意这一点，因为按钮是我想要的大小。但是，IE 将按钮的宽度设置为容器的大小。有什么方法可以将提交按钮的样式设置为其文本大小而不是更大？我试着做：

$('#element').css('display','inline')

但那没用。

感谢您的帮助！

【问题讨论】：

您希望您的移动网站在 IE 中的哪个位置被查看？
@ZoltanToth 我认为我们也将其用作桌面应用程序（如果这有意义的话）。否则，你是对的。
那么您可能想尝试设置所有参数以匹配内联元素 - $('#element').css({ display : 'inline !important', padding: 0, margin: 0, width: 'auto' })

标签： jquery css jquery-mobile

【解决方案1】：

这是一个 <input type="button" /> 元素的演示，当您向其添加 data-inline="true" 属性时，该元素正确地转到“内联”（在 IE8/IE9 中进行了测试）：http://jsfiddle.net/eVTef/

要在 IE7 中解决此问题，您需要添加“inline hack”：

.ui-btn-inline {
    *display : inline !important;
    zoom     : 1;
}

以星号 (*) 为前缀的属性不会被 IE8/IE9 或任何其他现代浏览器读取，但会被 IE7 读取。必须添加zoom : 1，以便元素获得hasLayout CSS（不能手动添加到元素）。

这是上述修复的演示：http://jsfiddle.net/eVTef/1/

奖金回合

您也可以在 IE6 中解决此问题，但您需要为元素指定高度。要为 IE6 指定高度而不为其他浏览器指定高度，我们可以执行类似于 IE7 的星号 hack：

.ui-btn-inline {
    *display : inline !important;
    zoom     : 1;
    _height  : 30px;
}

即使是 IE7 也会忽略下划线 (_) 前缀的属性，但 IE6 会使用属性声明。

【讨论】：

这里的*是什么意思？你能解释一下它为什么有效吗？
当您发表评论时，我感觉我正在输入确切的答案。现在检查答案。
我假设您在谈论 IE7，如果不是，您应该发布您正在测试的版本。
@Jasper 这可行，但它会影响其他所有已创建的按钮。当我尝试只为这个输入元素添加代码时，它不起作用。
这可能有助于解释：flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html

【解决方案2】：

将文本包装在<span> 标记中，并计算其宽度。

参见示例：http://jsbin.com/oxocil/2/edit

edit：您还可以通过 javascript 添加 span 标签，然后在必要时以相同的方式将其删除。

【讨论】：

我相信这是一个 jQuery Mobile 特有的问题，因为它与通过 jQuery Mobile 应用的 CSS 有关。