Question

我正在使用jquery UI 1.8 - 我使用element.button（）方法将按钮功能应用于我的html按钮元素。

现在一切正常，直到我在按钮元素上方动态添加另一个元素。按钮保持原位，好像它们是位置：绝对的。但这只发生在IE8 / IE9中。当你“鼠标悬停”它们时，它们会纠正它们的位置。有没有解决的办法？

非常感谢

已添加代码：

这是我正在使用的表格。我之前尝试过使用两个浮动div，但尝试使用该表来确保我的css没有导致问题：

 <table style="width:400px">
 <tr><td class="subheader">Aufgaben</td>
 <td style="text-align: right">
 <button class="versions">Historie</button></td>
 </tr></table>

现在我调用按钮方法

$( ".versions" ).button({
     icons: {
         primary: "ui-icon-calendar"
     }
});

这就是我在按钮上方添加一个元素的方法，实际上我只需要在display：none中设置一个元素来显示：block

 $(".ui-state-highlight").css("display", "block");

现在结果如我前面所述，按钮元素位于相同的位置，因为每个其他元素都会将其位置向下移动到页面下方。

Answer 1

是的，位置正在改变，因为默认值为display: inline-block

jQuery UI正在使用它，因为它影响text-align和其他文本特定的css属性可以在它上面使用（因为它需要inline）和width等对象特定的css属性也可以在它上面使用（因为它需要block）

因此，如果您将display设置为block再次显示该按钮text-align将不再对该按钮产生任何影响，因此您需要将display设置为{{1再次显示按钮

Answer 2

这将与jQuery ui调用的css样式有关，如果你还没有这些样式，请确保你有，因为它们都将被测试！

我会这样做：

<div id="container" style="float: left; width: 100%">
<div id="left" style="float: left; width: 40%">
    <p style="width: 100%; height: 30px display: block"><a href="#" style="displaY: block">Button 1</a></p><!-- change to suit -->
</div>
<div id="right" style="float: left; width: 40%;">
    <p style="width: 100%; height: 30px; display: block"><a href="#" style="displaY: block">Button 2</a></p>
</div>

然后调用你的ui按钮 - 这只是你编码和设计样式的一个问题！

Answer 3

好的问题已经通过在我设置display：block的元素下添加<br />来解决。我有时候不了解IE的盒子模型。

Jquery UI按钮定位

3 个答案: