CSS Sprite Button With float:left... 不在 Firefox 中的表格内居中答案

【问题标题】：CSS Sprite Button With float:left... Not centering inside a table in FirefoxCSS Sprite Button With float:left... 不在 Firefox 中的表格内居中
【发布时间】：2011-08-27 17:00:33
【问题描述】：

太棒了...我已经在 IE 而不是 Firefox 中工作了！事情的转机，嗯？

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

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

我正在使用这个文件来组合按钮。

(http://www.lolstrategies.com/test/composite__V153767378_.png)

显然，这个按钮仅在 IE 中居中.. 有什么用？！我使用一个跨度作为文本下方的背景，另一个作为提示，然后将它们与浮动一起浮动：通过查看源代码可以看到。

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

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

【问题讨论】：

标签： css xhtml css-float sprite

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

从.primaryLargeButtonSpan 和.primaryLargeButtonEnd 中删除float: left;

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

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

【讨论】：