jQUery ui在IE7中解决了一些问题 [英] jQUery ui buttons some issues in IE7

问题描述

我正在使用jquery UI按钮:

I am using jquery UI buttons:

$(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按钮向下移动了两个像素.

In all browsers the buttons looking perfectly the same , but when i check IE7(switched from IE9 to compatibility mode) the Back button has black border and Continue button moved a couple of pixels down.

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

here is jsfiddler link http://jsfiddle.net/XJRVt/7/

我还查看了IETester在IE6中的外观，它的外观与在IE7中的外观相同:(

I also looked at IETester how it is looking in IE6 and it is looking the same like in IE7 :(

也许有人会知道该如何解决?

May be someone would know how to fix that?

推荐答案

似乎是因为IE6/IE7对元素使用了不同的标准样式集.如果您使用CSS Reset或CSS Normalize框架，将可以工作:)

Seems like its becasue IE6/IE7 uses a different standard style set for elements. Would proberbly work if you use a CSS Reset or CSS Normalize framework :)

尝试使用Normalize.css(https://github.com/necolas/normalize.css/)并至少解决了浮动问题.

Tried using the Normalize.css (https://github.com/necolas/normalize.css/) and it fixed the float issue atleast.

所以它不是Jquery UI弄乱了布局，就是它的IE！

So its not Jquery UI messing up the layout, its 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中解决了一些问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！