我有一个居中的 ul（样式类似于 table ala cssplay），它在页面渲染后添加了 li 元素，它似乎在除 Firefox 和 Opera 之外的所有应用中都能很好地工作。
想要的效果是让 li 元素的行居中，即使只有一两个元素。这个例子模拟了 jQuery 在页面准备好两秒后添加 li 的问题。
无论出于何种原因，在添加第三个 li 后，Firefox 3.05 和 Opera 9.63 似乎将 ul 保持在初始绘制宽度，即使 CSS 中的任何位置都没有指定宽度。
当然，这绝对是在谋杀我，我们将不胜感激。
http://deadguy.reliccommunity.com/stuffbox/testinggrounds/display-table.html
【问题讨论】：
table-* 显示类型的定义仍然很不明确，因此您在这里得到不同的行为也就不足为奇了。根据我的经验，FF 在将某些规则应用于插入的内容方面也存在一些问题。不过幸运的是，有一种更直观的方式来编写这个页面，这种方式也发生在工作中。
与其将<ul/> 设置为display:table，不如将其保留为display:block（默认值）并将其设置为text-align:center。在这种情况下，您实际上并不关心 <ul/> 收缩包装内联表（这是您的代码实现的最终结果），您只希望表本身居中。
作为奖励，这允许您删除包装<div/>，因为它只是为<ul/> 的边距提供一个边界来推开。由于您不再使用这些边距，您可以简单地使用 <ul/> 作为包含块，并给它边框。
【讨论】：
我不能给你一个真正的答案，但是因为没有其他人回应......我在 Firebug 中运行了它（在 Firefox 3.01 中），当我将 #rounds li 的 CSS 样式更改为别的东西时，说内联，然后回到内联表，布局自行更正。所以看起来你的 CSS 规则很好，问题与额外的列表项是通过 Javascript 插入的事实有关。我还通过摆脱 JQuery 并插入 W3C DOM 脚本来做同样的事情来检查这一点，果然，同样的问题。
我想知道您是否在 Firefox（我猜是 Opera）中发现了一个错误，即当通过 Javascript 插入内容时页面没有正确重排。
【讨论】：
您似乎将inline-table 放入table 中，并将table-cells 放入table 中而没有任何table-row。由于这无效，因此可能会导致任何随机浏览器行为。
无论如何，display: table* 的支持很差（尤其是在 IE 中）。如果您今天想要表格布局，最好坚持使用实际表格。不太确定您要达到的目标；正如 Xanthir 所建议的，有更简单的方法可以实现简单的居中。
【讨论】：