-1

テーブルがブラウザー間で均等にレンダリングされないことに気付きました。

この例http://files.fina-indo.com/html-tests/tabletest.htmlを見て、Firefox と Google Chrome で開いてみましょう。Firefox では問題なく表示されますが、Google Chrome では奇妙に見えます。

均等にレンダリングする方法はありますか？DIV グリッドを使用することがこの問題の唯一の解決策ですか?

注: 私の Joomla ユーザーは素人であり、HTML と CSS について何も知らないため、これを尋ねています (彼はコンテンツを配置することしか知らない)。また、Joomla 内の WYSIWYG エディターには、DIV グリッド (Twitter Bootstrap グリッド) を簡単に作成する方法がありません。テーブルを同じように見せることができない場合、これを行うことができる TinyMCE プラグインまたはその他の WYSIWYG エディターはありますか?

私が使用しているHTMLは次のとおりです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
    Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title>HTML</title>
    <meta name="description" content="" />
    <meta name="author" content="Erwin" />

    <meta name="viewport" content="width=device-width; initial-scale=1.0" />

    <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="stylesheet" href="../gamma/templates/shaper_helix_ii/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="css/normalize.css" type="text/css" />

    <style type="text/css">
      .container {
        width: 940px
      }
    </style>
  </head>

  <body>
    <div>
      <header>
        <h1>HTML</h1>
      </header>
      <nav>
        <p>
          <a href="/">Home</a>
        </p>
        <p>
          <a href="/contact">Contact</a>
        </p>
      </nav>

      <div>
        <table border="0">
          <tbody>
            <tr>
              <td></td>
              <td></td>
              <td colspan="3"><img src="../gamma/images/solutions/GP_Solution_LanSchool.png" alt="" /></td>
              <td></td>
              <td colspan="3"><img src="../gamma/images/solutions/GP_Solution_ROO.png" alt="" /></td>
              <td></td>
              <td colspan="3"><img src="../gamma/images/solutions/GP_Solution_Microsoft.png" alt="" /></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td colspan="3"><img src="../gamma/images/solutions/GP_Solution_Eduvision.png" alt="" /></td>
              <td></td>
              <td colspan="3"><img src="../gamma/images/solutions/GP_Solution_KNT_Interactive.png" alt="" /></td>
              <td></td>
              <td colspan="3"><img src="../gamma/images/solutions/GP_Solution_Educo.png" alt="" /></td>
              <td></td>
              <td colspan="3"><img src="../gamma/images/solutions/GP_Solution_MiracleEdu.png" alt="" /></td>
            </tr>
          </tbody>
        </table>
      </div>

      <footer>
        <p>
          &copy; Copyright  by Erwin
        </p>
      </footer>
    </div>
  </body>
</html>

Firefox のスクリーンショット

Chrome のスクリーンショット

4

3 に答える 3

1

レイアウトにテーブルを使用しないでください。テーブルは表形式のデータ用であり、プレゼンテーション用ではありません。

これは答えではないと言う人々を満足させるために、画像を正しく配置するために 15 個の空のセルを持つ空の行を使用する HTML のセクションがある場合、HTML ソースを再考する必要があります。これに対する唯一の解決策：

        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>

もう一度やり直して書き直すことです。

于 2013-09-20T00:40:14.920 に答える
0

*{padding:0px; を追加することで、問題が CSS に関連しているかどうかをテストできます。margin:0px;} を css ファイルの一番上に追加すると、すべてのパディングとマージンがすべて削除されます。

css が台無しになりますが、すべてのブラウザーでテーブルが同じようにレンダリングされるはずです。

これが実際にcssに関連していることを確認したら、google for css browser reset hackを実装します. 非標準のブラウザーに依存しないすべての css 設定をリセットしようとします。

于 2013-09-20T00:34:56.687 に答える