jquery - float 和 jQuery UI 按钮

Question

我在一个元素中使用了 jQuery UI 按钮，它们运行良好。

但是，在 IE7 中，图标不会像它应该的那样 float 。我意识到 IE 尚不支持圆 Angular ，但没关系。

好的浏览器一些浏览器可以正常显示

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

上面的页面是also available . (我希望缩短为 void HTTP referrer)。

我做错了什么？

非常感谢!

更新

根据 Meder's answer，我尝试将图标制作为内联 block 元素.

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

无论如何，当您 float 一个元素时，它会变成一个 block 状框。显示:内联没用。 并且您应该始终为 float 项设置宽度。