Question

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

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

但这不起作用。

感谢您的帮助！

Answer 1

以下是<input type="button" />元素的演示，该元素正确地转到＆＃34;内联＆＃34;当您向其添加data-inline="true"属性时（在IE8 / IE9中测试）：http://jsfiddle.net/eVTef/

要在IE7中修复此问题，您需要添加＆＃34;内联黑客＆＃34;：

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

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

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

奖金回合

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

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

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

Answer 2

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

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

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

如何将<input />提交按钮设置为文本大小

2 个答案: