1

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

但是，在 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 引荐来源网址）。

我究竟做错了什么？

非常感谢！

更新

根据Meder 的回答，我尝试将图标制作为内联块元素。

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

然而，这具有使按钮元素消隐的不同寻常的影响！

带显示的 IE7：图标上的内联块

我该怎么办？

4

5 回答 5

1

无论如何，当你浮动一个元素时，它就会变成一个块框。显示：内联是没用的。而且您应该始终在浮动项目上设置宽度。

于 2010-10-04T07:32:33.463 回答
1

您需要明确定义水平浮动或浮动下降的宽度。另一种方法是使用inline-block。

如果这不起作用，请告诉我。

于 2010-10-04T08:03:37.267 回答
0

Try 

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

IE need a width for the button I think.

Here's my jsfiddle try

于 2010-10-04T08:18:25.333 回答
0 
<button type="submit"><span class="ui-icon ui-icon-mail-closed"></span><span style="float:left;">Send</span></button>
于 2010-10-04T07:26:25.480 回答
0

你渲染的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;
}
于 2010-10-04T08:00:09.113 回答