时间戳

首页 > 解决方案 > CSS 边框：Firefox/Chrome 的区别

html - CSS 边框：Firefox/Chrome 的区别

问题描述

我基本上在做的是在 HTML/CSS 中重现一个预先格式化的表格。但是，它在不同浏览器中的显示方式不同。Firefox 和 IE 按预期显示它。然而，Chrome 会画出一条虚假的线，即使通过检查 HTML 也不存在。在原始文件中，Chromium Embedded (CEF1) 有额外的差异。

我做了一个片段来演示这个问题：

<html>

<head>
  <style type="text/css" media="all">
    @media all {
      TABLE {
        border-collapse: collapse;
        border-spacing: 0;
        margin: 0;
        padding: 0;
        border: none;
        table-layout: fixed;
        empty-cells: show;
      }
      TR {
        page-break-inside: avoid;
      }
      TD {
        font-size: 11pt;
        font-family: "Times New Roman", Times, serif;
        text-align: center;
        vertical-align: middle;
        padding: 1px;
      }
      TD.S1 {
        border-left: 1px solid black;
        border-right: 1px solid black;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
      }
      TD.S2 {
        border: none;
      }
      TD.S3 {
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom: 1px dotted black;
      }
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <td class="S1">A</td>
      <td class="S2">B</td>
    </tr>
    <tr>
      <td colspan="2" class="S3">C</td>
    </tr>
  </table>
</body>

</html>

所以问题是：上面的 CSS 是否有问题，或者任何应该以不同方式使用的东西？我怀疑这样一个基本的东西可能是一个 Chrome 错误。不过，我不希望单元格“B”下方的那条线。

标签： htmlcss

解决方案

浏览器在解释事物方面有一些影响力，而 Chrome 有时会......不同......并且有时难以处理。

无论如何，我认为您不能重置边框颜色或大小（它会忽略transparentand 0），但您可以使用将融入背景的颜色覆盖它。删除border-collapse可能有效，但似乎与您真正想要的相反。

作为奖励，将边框放在所有边上可以纠正 Chrome 因缺少边框而给出的“B”向下移动。（其他浏览器没有这样做。）

<html>

<head>
  <style type="text/css" media="all">
    @media all {
      TABLE {
        border-collapse: collapse;
        border-spacing: 0;
        margin: 0;
        padding: 0;
        border: none;
        table-layout: fixed;
        empty-cells: show;
      }
      TR {
        page-break-inside: avoid;
      }
      TD {
        font-size: 11pt;
        font-family: "Times New Roman", Times, serif;
        text-align: center;
        vertical-align: middle;
        padding: 1px;
      }
      TD.S1 {
        border-left: 1px solid black;
        border-right: 1px solid black;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
      }
      TD.S2 {
        border: 1px solid white;
      }
      TD.S3 {
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom: 1px dotted black;
      }
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <td class="S1">A</td>
      <td class="S2">B</td>
    </tr>
    <tr>
      <td colspan="2" class="S3">C</td>
    </tr>
  </table>
</body>

</html>

推荐阅读