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