0

私はウェブサイトで作業していて、ページをデザインしましたが、ChromeとFirefoxで異なる結果が得られています。私が望むレイアウトはクロムで正しく与えていますが、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、body {margin：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 に答える