-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 插件或其他所见即所得的编辑器可以做到这一点？

这是我正在使用的 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>

火狐截图

铬屏幕截图

4

3 回答 3

1

不要使用表格进行布局，它们用于表格数据，而不是演示文稿。

为了让那些说这不是答案的人满意，如果您有一段 HTML 使用带有 15 个空单元格的空行来正确分隔图像，则需要重新考虑 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

您可以尝试使用normalize.css之类的东西来让表格（和其他元素）在浏览器中看起来更相似。

于 2013-09-19T23:59:28.517 回答
0

您可以通过添加 *{padding:0px; 来测试问题是否与您的 css 相关。margin:0px;} 添加到最顶部的 css 文件中，它将删除所有内容的所有填充和边距。

虽然它会弄乱你的 CSS，但它应该使表格在所有浏览器中呈现相同。

一旦你确定这确实与 css 相关，那么 google for css browser reset hack 并实现它。它将尝试重置所有非标准浏览器独立 css 设置

于 2013-09-20T00:34:56.687 回答