JQueryUI 按钮样式在应用于链接元素时定位不正确答案

【问题标题】：JQueryUI Button Styling Has Incorrect Positioning When Applied to Link ElementJQueryUI 按钮样式在应用于链接元素时定位不正确
【发布时间】：2012-04-16 17:07:29
【问题描述】：

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

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

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

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

【问题讨论】：

标签： jquery jquery-ui button

【解决方案1】：

嗯，我不知道这个错误，但当我在 Firefox 中尝试它时，它确实存在。由于这似乎是一个垂直对齐问题，解决它的一种方法是将锚点放在具有display:table 的父元素中，并将display:table-cell 分配给锚点。这应该像表格单元格的内容一样将锚点置于父级中。我在firefox中修改了css，这解决了jquery ui演示页面上的问题：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：