0

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

我还希望所有表格都应该从顶部开始，就像在它们出现的 Firefox 中一样，但是 chrome 没有给出正确的结果

请帮助我摆脱这个问题...我将屏幕截图附加为：- 在此处输入图像描述在Firefox中 铬图像

镀铬

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

还有它的小提琴

4

2 回答 2

0

尝试将 valign=top 添加到您的表格中。

并在您的 CSS 中重置 HTML 和正文的浏览器默认值。像这样：

html，正文{边距：0；填充：0 }

于 2012-06-12T09:56:21.970 回答
0

嘿用这个 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;
}
于 2012-06-12T09:58:08.773 回答