Кнопка Float и jQuery UI

Я использовал кнопки пользовательского интерфейса jQuery в проекте, и они работают нормально.

Но в IE7 значок не работает. t плавать как надо. Я понимаю, что IE еще не поддерживает закругленные углы, но это нормально.

Хорошие браузеры Некоторые браузеры отображают это нормально

IE отстой версия 7 не поддерживает:

Я начинаю с кнопки в HTML

Send

. Затем я перебираю кнопки, используя этот небольшой фрагмент jQuery для каждого

$('#content button').each(function() {                
    var icon = $(this).find('span.ui-icon');
    var primaryIcon = icon.attr('class').replace(/ui-icon\s?/, '');
    icon.remove();
    $(this).button({ icons: {primary: primaryIcon }, label: $(this).text() });
});

, я просто звонил на них button () , но решил чтобы сделать это, чтобы убедиться, что я использую библиотеку так, как она была задумана.

У меня тоже был CSS на иконке

button span.ui-icon {
    display: inline;
    float: left;
    margin-right: 0.1em;
}

Страница сверху также доступна . (Я надеюсь, сокращенно до недействительного HTTP-реферера.)

Что я делаю не так?

Большое спасибо!

Обновление

Я попытался сделать значок встроенным блочным элементом согласно Ответ Медера .

button span.ui-icon {
    display: inline;
    float: left;
    margin-right: 0.1em;
    margin-top: -1px;
    /* get rid of margin for inline element */
    #margin: auto; 
    /* this should revert the element to inline as per declaration above */
    #float: none; 
    /* hasLayout = true */ 
    #zoom: 1;
}

Это, однако, имеет необычный эффект - гашение элементов кнопок!

Что мне делать?