jQuery UI Button在IE 7上不起作用

Question

I have this code:

<script type="text/javascript" src="<?=$path?>common/_LIB/3rd/jquery/jquery-ui-1.8.16/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="<?=$path?>common/_LIB/3rd/jquery/jquery-ui-1.8.16/js/jquery-ui-1.8.16.custom.min.js"></script>
<link type="text/css" href="<?=$path?>common/_LIB/3rd/jquery/jquery-ui-1.8.16/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />

<script>
    $(function() {
            $('.button,.button floatRight').button();
    });
</script>

and

<a class="button floatRight" href="handset_list.php"><?=$reprint?></a>

and all is well on Chrome and FF, IE 9, but on IE 8 and IE 7, I can't see the button for the above link only.

Answer 1

You have an error in your code in jQuery selector. There is no tag name called "floatRight" . Try this:

$('.button').button();

Answer 2

尝试以下代码：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

Answer 3

You probably mean

$(function() {
        $('.button,.button floatRight').button();
});

A space in the tag attribute means there are two classes. In your case the button you try to target has two classes: button and floatRight . Hence two dots.

EDIT:
I found something else: the function $("#something").button(); calls $.data a lot of times. According to caniuse.com IE only has partial support for custom data on attributes, So, it may not work as the jQuery UI developers think it would in IE 7. The many calls to $.data make me think the .button() function kind of relies on it (but I don't really understand it yet, I just had a quick glance). If that is so, that is probably the cause. If you really need IE 7 support I suggest using a jQuery UI build released when IE 7 was the most used IE, although that might not support all features you use now. I'd say just let IE 7 users see an anchor. What's so bad about an anchor?