Кнопка с плавающей точкой и jQuery UI

Question

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

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

Хорошие браузеры Некоторые браузеры хорошо отрисовывают

IE отстой версия 7 не:

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

<button type="submit"><span class="ui-icon ui-icon-mail-closed"></span>Send</button>

Затем я переключаю кнопки, используя этот маленький кусочек 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;
}

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

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

Answer 1

Вам необходимо явно определить ширину для горизонтальных поплавков или поплавков . Альтернативой является использование inline-block .

Если это не сработает, дайте мне знать.

Answer 2

В любом случае, когда вы перемещаете элемент, он становится блок-блоком. Дисплей: встроенный бесполезен. И вы всегда должны устанавливать ширину для плавающих элементов.

Answer 3

Попробуйте

button span.ui-icon {
    display: inline;
    float: left;
    margin-right: 2px;
}
button{width:75px;}

Мне нужна ширина для кнопки, я думаю.

Вот моя попытка jsfiddle

Answer 4

ваш обработанный html,

<button type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button" aria-disabled="false">
    <span class="ui-button-icon-primary ui-icon ui-icon-mail-closed"></span>
    <span class="ui-button-text">Send</span>
</button>

вы пробовали css,

button span.ui-button-text {
    display: inline;
    float: left;
}

Answer 5

<button type="submit"><span class="ui-icon ui-icon-mail-closed"></span><span style="float:left;">Send</span></button>