JQueryUIボタンのスタイル設定がリンク要素に適用されたときに位置が正しくない

Question

JQuery UI .button機能を使用してリンク項目のスタイルを設定すると、ChromeとSafari以外のブラウザでリンクの位置が上に移動します。これは、FireFoxとIEで容易に明らかです.JQueryのデモページhttp://jqueryui.com/demos/buttonに行っても容易です。

私はこれがJQueryのバグに記載されているknown issueであることを認識していますが、現在のところ解決策はありません。

誰かがこの問題を緩和するための回避策（JQueryまたはCSS経由）を見つけたので、「ボタン」がすべてのブラウザで正しく整列されていますか？私はこれが重要な問題であると感じています。私は、SubmitボタンとCancelリンクが並んでいる多くのフォームを持っています。

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

Answer 1

うーん、私はこのバグを認識していなかったが、私はFirefoxでそれをしようとしたとき、それが確かにあります。これは垂直方向の問題と思われるので、解決する1つの方法は、アンカーをdisplay:tableの親要素に置き、display:table-cellをアンカーに割り当てます。これは、表のセルの内容と同じように、親の中にアンカーを配置する必要があります。私はFirefoxでCSSを変更し、これはjqueryのUIのデモページに問題を修正：それはdisplay:table-cellをサポートしていないので、これはIE7で動作しないこと

は注意してください。しかし、IE8 +とfirefoxで動作するはずです。

Answer 2

だけでタグのような役割を果たしたonclickイベントでボタンを作成します。

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

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