JQUery UI кнопки некоторые проблемы в IE7

Question

Я использую кнопки пользовательского интерфейса jquery:

$(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 framework:)

Попытка с использованием 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; }