0

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

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

但是，那没有用。

谢谢您的帮助！

4

2 回答 2

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必须添加，以便元素获取CSS hasLayout（不能手动添加到元素）。

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

奖金回合

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

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

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

于 2012-06-05T15:59:15.123 回答
0

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

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

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

于 2012-06-05T15:56:30.267 回答