jQUery ui按钮IE7中的一些问题

Question

我正在使用 jquery UI 按钮：

$(document).ready(function() {
    $("a.button, .button, button, input:submit, input:button").button();
})

<p>
    <button type="submit" value="Back">Back</button> &nbsp;&nbsp;<a class="button" id="register">Continue</a>
</p> 

在所有浏览器中，按钮看起来完全一样，但是当我检查 IE7（从 IE9 切换到兼容模式）时，Back 按钮有黑色边框，Continue 按钮向下移动了几个像素。

这里是 jsfiddler 链接http://jsfiddle.net/XJRVt/7/

我还查看了 IETester 它在 IE6 中的外观和在 IE7 中的外观：(

可能有人知道如何解决这个问题？

Answer 1

似乎是因为 IE6/IE7 为元素使用了不同的标准样式集。如果你使用 CSS Reset 或 CSS Normalize 框架会很有效:)

尝试使用 Normalize.css (https://github.com/necolas/normalize.css/)，它至少修复了浮动问题。

所以不是 Jquery UI 弄乱了布局，而是 IE！

尝试插入：

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */
button, input { line-height: normal; *overflow: visible; }
/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */
table button, table input { *overflow: auto; }