如何将提交按钮设置为文本大小

I'm using jquery mobile and have a form with a submit button. Unfortunately, after doing some research I learned that jquery mobile's data-inline attribute doesn't work for input elements. I want the submit button to just be the size of its text. Firefox must take care of this, because the button is the size I want it to be. However, IE sets the width of the button to the size of the container. Any way to style a submit button to the size of its text and no larger? I tried doing:

我正在使用jquery mobile并且有一个带有提交按钮的表单。不幸的是，在做了一些研究后，我了解到jquery mobile的data-inline属性对输入元素不起作用。我希望提交按钮只是其文本的大小。 Firefox必须处理这个问题，因为按钮的大小是我想要的。但是，IE将按钮的宽度设置为容器的大小。任何方式将提交按钮设置为其文本大小并且不大？我尝试过：

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

That didn't work, though.

但这不起作用。

Thanks for the help!

谢谢您的帮助！

2 个解决方案

#1

Here is a demo of a <input type="button" /> element that correctly goes to "inline" when you add the data-inline="true" attribute to it (this is tested in IE8/IE9): http://jsfiddle.net/eVTef/

这是一个元素的演示，当你向它添加data-inline =“true”属性时，它正确地转到“inline”（这在IE8 / IE9中测试）：http：/ /jsfiddle.net/eVTef/

To fix this in IE7 you need to add the "inline hack":

要在IE7中修复此问题，您需要添加“内联黑客”：

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

The property prefixed by an asterisk (*) will not be read by IE8/IE9 or any other modern browsers but will be read by IE7. The zoom : 1 has to be added so the element gets the hasLayout CSS (which cannot be manually added to an element).

带有星号（*）前缀的属性将不会被IE8 / IE9或任何其他现代浏览器读取，但将由IE7读取。必须添加zoom：1，以便元素获取hasLayout CSS（无法手动添加到元素中）。

Here is a demo of the above fix: http://jsfiddle.net/eVTef/1/

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

Bonus Round

奖金回合

You can also fix this issue in IE6 but you will need to specify a height for the element. To specify a height for just IE6 and no other browsers we can do something similar to the asterisk hack for IE7:

您也可以在IE6中修复此问题，但您需要为元素指定高度。要为IE6而不是其他浏览器指定高度，我们可以为IE7的星号黑客做类似的事情：

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

Even IE7 will disregard the underscore (_) prefixed property but IE6 will use the property declaration.

即使IE7也会忽略下划线（_）前缀属性，但IE6将使用属性声明。

#2

Wrap the text in a <span> tag, and calculate the width of that.

将文本换行到标记中，并计算其宽度。

see example: http://jsbin.com/oxocil/2/edit

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

edit: you could also add the span tag via javascript, and then remove it the same way if necessary.

编辑：你也可以通过javascript添加span标签，然后在必要时以相同的方式删除它。

#1