当应用于链接元素时，JQueryUI按钮样式的位置不正确

使用JQuery UI

.button

功能设置链接项目样式时，在除Chrome和Safari之外的任何浏览器中查看时，链接“button”的位置都会向上移动。这一点在FireFox和IE中很明显，即使是在访问JQuery演示页面时也是如此

我知道这是JQuery bug中列出的一个问题，但它目前没有显示解决方案

是否有人找到了一个可行的解决方法（通过JQuery或CSS）来缓解这个问题，从而使“按钮”在所有浏览器中正确排列？我觉得这是一个重要的问题，因为我有很多表单，它们都有一个提交按钮和一个取消链接

  <input type="submit" value="Submit" class="button"/>
  <a class="button" href="/Home">Cancel</a>

---

只需创建一个带有onclick事件的按钮，该事件的作用类似于标记：

<script type="text/javascript">
    function openWindow( location )
    {
        window.open( location );
    }
</script>

<button onclick="openWindow('\home')">Home</button>

函数openWindow（位置）
{
窗口。打开（位置）；
}
家

嗯，我没有意识到这个bug，但当我在firefox中尝试它时，它确实存在。由于这似乎是一个垂直对齐问题，解决该问题的一种方法是将锚点放在具有

display:table

的父元素中，并将

display:table cell

分配给锚点。这应该像表格单元格的内容一样，将锚定点置于父级的中心。我在firefox中修改了css，修复了jquery ui演示页面上的问题：

请注意，这在IE7中不起作用，因为它不支持

display:table cell

。但是应该可以在IE8+和firefox中使用