不同的浏览器为网页提供不同的输出

Question

我正在网站上工作，我设计了一个页面，但它在chrome和firefox中给出了不同的结果。我想要的布局是在chrome中正确给出但是firefox给出了不同的结果..

我还希望所有的表都应该从firefox开始，就像在firefox中出现但是chrome没有给出正确的结果

请帮助我摆脱这个问题...我附加屏幕截图： - firefox中的

在chrome中

我的html文件代码如下：

  <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

尝试在表格中添加valign = top。

在CSS中重置HTML和body的浏览器默认值。像这样：

html，body {margin：0;填充：0}

Answer 2

嘿用这个css来重置你的css文件

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