margin：0を使用していても、Firefoxはセンターテーブルではありません。

次のHTMLは、ChromeとIEで動作しますが、FireFoxで中心のテーブルを作成できません。私はマージンを使用しようとしました：0自動とそれは役に立たない。誰でも助けてくれますか？margin：0を使用していても、Firefoxはセンターテーブルではありません。

<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>

出典

2011-07-05 Avi Chapman

ここjsFiddle.netの[HTMLとCSS]（http://jsfiddle.net/ZfQWA/）です。 – Phrogz

あなたの問題は、table要素にdisplay:table-cellある

出典

2011-07-05 05:30:57

あなたの非常に簡潔な答えをありがとう。 –

ようこそ。 –

display: table-cell;、ライン42を取り除きます。それは間違っている。それを削除すると、問題が改善されます。

P.S. 将来的には、問題を最小限のテストケースに完全に分解してください。コードの削除 - HTMLとCSS - これは無関係です。 h1、font-family CSSなどです。これを行うプロセスでは、問題の約80％が表示されます。残りの時間は簡単にあなたに手を差し伸べる簡単な問題を残します。

コードが削除されるまで削除すると、問題が見つかりました。 :)

出典

2011-07-05 05:32:01 Phrogz

チップをありがとう。私は将来それを試みます。 –

-1

あなたのHTMLドキュメントには<!DOCTYPE type='html' />ディレクティブがないためです。この行を文書の先頭に置いてください：

推奨：CSSファイルを管理しやすくするために、できる限り簡略構文を使用してください。、代わりに

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

使用の例：

padding: 50px 30px 3px 0;

出典

2011-07-05 05:33:50

アドバイスをいただきありがとうございます。私は未来のことを心に留めておきます。 –

margin：0を使用していても、Firefoxはセンターテーブルではありません。

答えて

関連する問題