다른 브라우저가 웹 페이지에 대해 다른 출력을 제공합니다.

Question

웹 사이트에서 작업 중이며 페이지를 디자인했지만 크롬과 파이어 폭스에서 다른 결과를 제공합니다. 내가 원하는 레이아웃은, 크롬에서 제대로주고 있지만, 파이어 폭스는 다른 결과를주고있다 ..

나는 또한 모든 테이블 상단에서 시작해야 함을 원하는들이 등장하고 있지만, 크롬 적절한 결과를 제공하지 않습니다 파이어 폭스처럼

내 HTML 파일의 코드를 그대로 크롬에서 파이어 폭스

에서 :

- : 나는이 스크린 샷을 첨부하고 ... 내가이 문제를 없애 도와주세요 이 포함한 3,691,363,210

<div id="page"> 
    <div class="container" >   
     <div style="overflow:hidden;"> 
      <table width="44%" > 
      <tr> 
      <th>Todays To-Do</th> 
      </tr> 
      <tr><td>T-shirts.xls</td></tr> 
      <tr><td>Caps.xls</td></tr> 
      <tr><td>Mugs.xls</td></tr> 
      <tr><td>Pens.xls</td></tr> 
      <tr><td>xxx</td></tr> 
      <tr><td>xxx</td></tr> 
      <tr><td>xxx</td></tr> 
      </table> 
      <table width="27%" > 
      <tr> 
      <th>Vendor Contact List</th> 
      </tr> 
      <tr><td>T-shirts.xls</td></tr> 
      <tr><td>Caps.xls</td></tr> 
      <tr><td>Mugs.xls</td></tr> 
      <tr><td>Pens.xls</td></tr> 
      <tr><td>xxx</td></tr> 
      </table> 
      <table width="27%"> 
      <tr> 
      <th>Price list</th> 
      </tr> 
      <tr><td>T-shirts.xls</td></tr> 
      <tr><td>Caps.xls</td></tr> 
      <tr><td>Mugs.xls</td></tr> 
      <tr><td>Pens.xls</td></tr> 
      <tr><td>xxx</td></tr> 
      </table> 
      </br> 
      </div> 
      <table width="45.56%" > 
      <tr> 
      <th>Add new+</th> 
      </tr> 
      </table> 
       </div> 
      </div> 
     </div> 

내 CSS는 다음과 같습니다

body 
{ 

    background: url(../images/bg-main.jpg)top repeat-x; 
    text-align:left; 
    color:#333; 
    font-family:Arial, Helvetica, sans-serif; 
} 

    #maincontainer-02 
    { 
     background:#ffffff; 
     border-left:1px solid #dedede!important; 
     border-right:1px solid #dedede!important; 
     margin-top:5px; 
    } 

    table 
    { 
     display:inline; 
     border-collapse: collapse; 
     border-spacing: 0px; 
    } 

    td 
    { 
     border:solid 1px #bfbfbf; 
    } 

    th 
    { 
     background-color:#bfbfbf; 
     border:solid 1px black; 
     text-align:left; 
     font-family:"Times New Roman", Times, serif; 
     font-size:1.875em; 
    } 
    * 
    { 
     margin: 0; 
     padding: 0; 
    } 

    #content 
    { 
     width:100%; 
    } 

    pre 
    { 
     border:3px solid #ccc; 
     padding:5px; 
     font-size:12px; 
     font-family:arial; 
    } 
    .bold{font-weight:bold;} 
    .blue{color:blue;} 
    .red{color:red;} 

및 there are its Fiddle

Answer 1

이봐,이 CSS를 사용 0}

html, body, div, span, applet, object, iframe, 
    h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
    a, abbr, acronym, address, big, cite, code, 
    del, dfn, em, img, ins, kbd, q, s, samp, 
    small, strike, strong, sub, sup, tt, var, 
    b, u, i, center, 
    dl, dt, dd, ol, ul, li, 
    fieldset, form, label, legend, 
    table, caption, tbody, tfoot, thead, tr, th, td, 
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary, 
    time, mark, audio, video, input[type="checkbox"] { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     font-size: 100%; 
     font: inherit; 
     vertical-align: baseline; 
    } 
    ol, ul { 
     list-style: none; 
    } 
    img{ 
     border:0; 
     outline:0; 
     vertical-align:top; 
    } 
    a{ 
     outline:0; 
     text-decoration:none; 
     display:inline-block; 
    } 
    table { 
     border-collapse: collapse; 
     border-spacing: 0; 
    } 
table tr td{ 
vertical-align: top; 
} 

Answer 2

시도하여 테이블에 vAlign와 = 정상을 추가.

그리고 CSS에서 HTML 및 본문의 브라우저 기본값을 재설정합니다. 이와 같이 :

html, body {margin : 0; 패딩 : CSS 파일 재설정에 대한