Набор кнопок пользовательского интерфейса jQuery сдвигается вниз в Internet Explorer 8

У меня есть этот сценарий,

<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>

<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>

Он работает нормально с Firefox, но не работает с Internet Explorer (проверено с Internet Explorer 8), переключатель смещен вниз следующим образом:

Как это исправить?

Я использую jQuery 1.4.2 и jQuery UI 1.8.5.