css 表格中心在 Firefox 中不起作用答案

【问题标题】：css table center not working in Firefoxcss 表格中心在 Firefox 中不起作用
【发布时间】：2012-08-12 07:09:01
【问题描述】：

我使用以下方法使表格居中：

table{
margin-left: auto;
margin-right: auto;
}

它在 Google Chrome 上运行良好，但在 Firefox 上就不行，有什么想法吗？我应该将表格包装在一个 Div 中并为其使用特定的 ID 吗？

P.S 我没有使用 -webkit- 。如果我使用了 -webkit-，我一定要添加 -moz-

JSFiddle

这里有一个链接供大家检查： you can see for yourself

【问题讨论】：

请在此处发布代码，如果可能，请在 jsFiddle.net 上发布示例。
“不工作”是什么意思？你能说得更具体点吗？
我只能说'no-repro'，在 Chromium 18、Firefox14 和 Opera 12 上。
我添加了一个链接，以便您查看。
在此处的 Firefox 14.0.1 中看起来不错。

标签： html css firefox

【解决方案1】：

CSS

将此添加到您的 CSS 文件中：

header
{
    float:none!important
    /* or remove float:right; in your current CSS file */
}
#nav
{
    background:none;
    float:right
}
#tb
{
    margin:0 auto;
    width:1080px;
    border-spacing:0;
    border:0;
    border-collapse:collapse
}
.clearfix:after
{
    clear:both;
    content:'.';
    display:block;
    font-size:0;
    height:0;
    line-height:0;
    visibility:hidden
}
.clearfix
{
    display:block;
    zoom:1
}

HTML

并且在您的 HTML 代码更改中：

<nav>
    <ul id="nav">

到：

<nav class="clearfix">
    <ul id="nav" class="clearfix">

【讨论】：

嗯.. 我缺少 Tbody 标签，可能是这个问题吗？
它是使用
和一个 ID 包装的，如果我还要添加 div，我认为 Firefox 可以很好地处理 html5。
您能否进一步解释您是如何发现问题所在的？对于未来的此类错误。
老实说，我只是从您的源代码中删除了不同的部分，当我删除 header 时，一切正常。 :) 然后我只是看了你的 CSS 代码，然后从那里继续。顺便说一句，问题出在您的floats 上。当您使用float 时，只需将<div class="clearfix"> 包裹在这些元素周围，就可以了。

【解决方案2】：

嗯，这完全取决于您的表格嵌套的方式/位置，您需要将父容器中的内容居中或将页面主体居中，或者将 position:absolute; 添加到表格 css。

【讨论】：

使用位置：绝对；破坏了 Chrome 上的显示；-/