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

은 display: table-cell;

출처

2011-07-05 05:30:57

매우 간결한 답변을 주셔서 감사합니다. –

당신을 진심으로 환영합니다. –

귀하의 문제는 table 요소 display:table-cell이다, 라인 (42)을 제거하기. 그건 잘못된거야. 그것을 제거하면 문제가 좋아집니다.

P. 앞으로는 문제를 최소한의 테스트 케이스로 철저히 분석해야합니다. 코드 삭제 - 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가 센터링 테이블이 아닙니다.

답변

관련 문제