应用于链接元素时，JQueryUI按钮样式具有不正确的定位

Question

使用JQuery UI .button函数设置链接项的样式时，链接的位置＆＃34;按钮＆＃34;在除Chrome和Safari之外的任何浏览器中查看时，都会向上移动。这在FireFox和IE中很明显，即使在http://jqueryui.com/demos/button转到JQuery演示页面时也是如此。

我知道这是JQuery错误中列出的known issue，但它目前没有显示解决方案。

有没有人找到一个可行的解决方法（通过JQuery或CSS）来缓解这个问题，以便＆＃34;按钮＆＃34;在所有浏览器中正确排队？我觉得这是一个重要的问题，因为我有很多表单都有一个提交按钮和取消链接彼此相邻。

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

Answer 1

只需创建一个带有onclick事件的按钮，该事件就像一个标记：

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

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

Answer 2

嗯我没有意识到这个bug，但是当我在firefox中尝试它时确实存在。由于这似乎是一个垂直对齐问题，解决它的一种方法是将锚点放在一个带有display:table的父元素中，并将display:table-cell赋给锚点。这应该将锚定在父对象中作为表格单元格的内容。我在firefox中修改了css，这解决了jquery ui演示页面上的问题：

请注意，这在IE7中不起作用，因为它不支持display:table-cell。但是应该在IE8 +和firefox中工作。