Question

以下HTML无法在FireFox中创建居中的表格，即使它在Chrome和IE中有效。我尝试过使用margin：0 auto，这没有帮助。任何人都可以帮助我吗？

<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<title>ICG Administrator Login</title>
<style type="text/css">
body {
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
}
h1 {
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    color: #00377E;
    display: block;
    font-family: sans-serif;
    font-size: 26px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    height: 32px;
    line-height: 32px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    text-align: center;
    vertical-align: baseline;
}
table {
    -webkit-border-horizontal-spacing: 0px;
    -webkit-border-vertical-spacing: 0px;
    border: 1px solid #053F89;
    color: #444;
    display: table-cell;
    font-family: sans-serif;
    font-size: 13px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 16px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    position: static;
    vertical-align: top;
    white-space: normal;
}
</style>
</head>
<body>
<h1>Gateway and CDUE Administration</h1>
<div style="width: 100%; height: 50px; background-color: #053F89; background-origin: padding-box;"></div>
<DIV style="text-align: center;">
    <form method="GET" action="j_security_check">
    <BR>
        <table>
            <tr style="background-color: #053F89; font-weight: bold; color: white;">
                <td colspan=2>Log In</td>
            </tr>
            <tr>
                <td>User Name:</td>
                <td><input type="text" name="j_username" />
                </td>
            </tr>
            <tr>
                <td>Password:</td>
                <td><input type="password" name="j_password" />
                </td>
            </tr>
            <tr>
                <td colspan=2><input type="submit" value="Login" /></td>
            </tr>
        </table>
    </form></DIV>
</body>
</html>

Answer 1

摆脱第42行，display: table-cell;

Answer 2

display:table-cell元素上的问题是table。那是不对的。删除它，你的问题变得更好。

P.S。将来，您应该尝试将问题完全削减到最小的测试用例。删除无关的代码 - HTML和CSS。 h1，font-family CSS等。这样做的过程会显示问题≈80％的时间;它剩下的时间会给你一个简单的问题，很容易让你得到帮助。

删除代码直到它变好为我找到问题的方法。：）

Answer 3

这是因为您的HTML文档缺少<!DOCTYPE type='html' />指令。把这一行放在你的文档的顶部，它完成了：）

另外一个建议：尝试尽可能使用速记语法，以使您的CSS文件更易于管理。例如，而不是

padding-top: 50px;
padding-right: 30px;
padding-bottom: 3px;

使用：

padding: 50px 30px 3px 0;

尽管使用了保证金：0自动，但Firefox并不是中心表

3 个答案: