CSS Sprite按钮使用float：left ...不在Firefox的桌子中居中

Question

太棒了......我已经开始在IE浏览器而不是Firefox工作！事件发生了转折，嗯？

无论如何，这是问题所在。在IE和Firefox中查看以下页面：

http://www.lolstrategies.com/test/button_sample.html

我正在使用此文件将按钮放在一起。

（http://www.lolstrategies.com/test/composite__V153767378_.png）

显然这个按钮只在IE中居中..什么给出了？！ 我正在使用跨度为文本下方的背景，另一个用于尖端，然后将它们与浮动一起浮动：左侧，您可以通过查看源来看到。

那么，我该怎么做才能让这个跨度集中在Firefox？

提前致谢..如果您对此有任何疑问，请告诉我，我可以帮忙解答！

Answer 1

你的span.buttonLarge包含两个未清除的浮动块级元素，因此没有居中。要解决此问题，您可以将display: inline-block和margin: 0 auto应用于此。

P.S。您没有指定DOCTYPE，这就是您当前的解决方案在IE中工作的原因 - 它以Quirks模式呈现。

Answer 2

从float: left;和.primaryLargeButtonSpan

移除.primaryLargeButtonEnd

之后display: block;从display: inline;更改为.spriteButton span.button_label 或者将其更改为display: inline-block;，然后将background属性设置为url("./composite__V153767378_.png") no-repeat scroll left -76px transparent;

你可能会注意到结尾图像中有一些“缺陷”......