jQuery UI buttonset shift down in Internet Explorer 8

I have this scipt,

<script>
    $(document).ready( function() {
        $('.add').button({
            icons: 'ui-icon-plus',
            text: false
        }).next().button({
            icons: 'ui-icon-minus',
            text: false
        }).next().button({
            icons: 'ui-icon-arrowthick-1-w',
            text: false
        }).next().button({
            icons: 'ui-icon-arrowthick-1-e',
            text: false
        });

        $('.radio-container').buttonset();
    });
</script>

<开发者_JAVA百科button class="add">Add</button>
<button class="delete">Delete</button>
<button class="left">Left</button>
<button class="right">Right</button>

<span class="radio-container">
    <input type="Radio" name="radio" id="radio_1"><label for="radio_1">Radio 1</label>
    <input type="Radio" name="radio" id="radio_2"><label for="radio_2">Radio 2</label>
</span>

It works fine with Firefox but failed with Internet Explorer (tested with Internet Explorer 8), radio button shifted down like this:

How do I fix it?

I use jQuery 1.4.2 and jQuery UI 1.8.5.

---

I hope this code can help you to solve your problem. It works fine in my IE 8.

$('.radio-container').buttonset().find('label').css({"vertical-align":"middle"});

---

jQuery sets CSS on a label to a margin of 8 pixels. Override and set CSS label { margin: 0px; } to fix it.

---

I think this has to do more with CSS than it does with the jQuery. For some reason you're styling your radio inputs as buttons--which I question why. But at any rate, I can only suggest hitting F12 on Internet Explorer 8 and take a look at your elements and how they're being represented by the CSS.

You may want to put the CSS as part of your question.