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 link http://jsfiddle.net/XJRVt/7/

我也看过IETester它在IE6中是如何看的，它看起来和IE7一样:(

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

Answer 1

似乎它因为IE6 / IE7使用不同的标准样式设置元素。如果您使用CSS重置或CSS规范化框架，将会成功地工作：）

尝试使用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; }

jQUery ui在IE7中按下一些问题

1 个答案: