为什么 THe 比 TD 更大胆，如何避免？

Question

编辑 2015 年 6 月 14 日 - 从这个问题中，我了解到 "bolder" 和 "lighter" 是相对的。我之前引用的来源说 "bolder" 是一个绝对度量，意味着 "extra bold"。我现在更改了该来源 :) (selfhtml.org wiki)。感谢大家的帮助。

请考虑以下内容CSS：

table.a tr { font: bold 12pt Arial; }
table.b td,table.b th { font: bold 12pt Arial; }

和HTML（我压缩了一下，也在这里：http://jsfiddle.net/b9uwnx31/

<body>
  <h2>Boldness Check</h2>
  <table class="a">
    <tr>
      <th>TH Column 1</th><td>TD Column 2</td><th>TH Column 3</th>
    </tr>
  </table>  
  <table class="b">
    <tr>
      <th>TH Column 1</th><td>TD Column 2</td><th>TH Column 3</th>
    </tr>
  </table>  
</body>

请使用 Internet Explorer（10 或 11）查看 fiddle，然后使用 Chrome 查看 Windows。注意IE在标准模式下运行。

我不明白表 A 和表 B 中 TH 的不同行为。当我使用 font-weight:bold 设置 TR 样式时，TH 呈现为更粗。当我直接为 TH 设置样式时，TD 和 TH 以相同的权重呈现。

这发生在 Internet Explorer 9 及更高版本中，它发生在 Android 浏览器和 Chrome 中 Android，但它不会发生在 Chrome 中 Windows（这些是我可以检查的浏览器）。这是某种怪癖吗？还是我不知道如何控制的功能？

Answer 1

您正在尝试设置 <TR> 标签的样式。为了跨浏览器一致地做到这一点，您需要将 table 的 border-collapse 属性设置为 collapse.

table {
  border-collapse: collapse;
}

现在您的 <TR> 规则将适用。

请注意，<TH> 标签默认设置为粗体，这就是为什么当您尝试设置 <TR>.

Answer 2

这对我来说很正常。在 table A 中，您没有说明 <th> 或 <td> 应该如何设置样式，因此使用默认样式，这意味着浏览器可以做 任何事情 他们想要：设置行样式不会覆盖列默认值。

对于 table B，您明确说明了 <th> 和 <td> 样式应该发生什么，因此它们看起来相同。在最新的 IE 中：

另请注意，严格来说，border-collapse与此问题无关，正如某些答案所暗示的那样。它 "solves" 通过更改 <tr> 元素的样式语义来解决问题。相反，这真的纯粹是 "if you want to style elements the same, specify CSS for those elements, not just their parents" 的问题；如果你有嵌套的 div，你不会注意到这是一个问题，但如果你嵌套了 different 元素，你可能运行进入这个，你的例子是一个完美的这很重要的实际案例的演示者。

Answer 3

我在 Firefox 和 Internet Explorer（最新版本）中检查了您的代码片段，确实，这两种浏览器呈现 th 元素的粗体程度存在差异。

我能提供的最佳解释是 CSS 规范没有说明如何计算 th 元素的字体粗细，所以这是如何计算的完成由浏览器决定。

在这两种浏览器中，如果您像在 Table B 中那样在 td 和 th 元素上明确指定字体粗细，那么您将获得一致的字体粗细。在 Firefox 中，该值设置为 bold，在 Internet Explorer 中，bold 值映射到 Arial 字体的字体粗细比例值 700。

在 Table A 的情况下，字体粗细应用于父元素，即包含 table 单元格的 tr。对于 Firefox，CSS 引擎继承了 tr 的值，即 bold，并且您获得了一致的字体粗细。

但是，对于 Internet Explorer，字体粗细的计算方式不同。首先，IE CSS 引擎获取继承值 bold，并将其作为字体粗细 700 应用于 td 元素。对于 th 元素，IE CSS 引擎似乎应用了 bolder 而不是 bold 的等效项，这导致计算出的字体粗细为 900，这使得 th 元素看起来更粗。

您在这里看到的是跨浏览器的差异，这是由于软件设计工程师在没有明确的指导方针的情况下决定如何解释 CSS 规范。

我还注意到，如果将字体系列更改为其他内容，您可能看不到问题，因为浏览器读取字体元数据来决定如何将字体粗细比例映射到中指示的字体粗细字体元数据。（请参阅 http://dev.w3.org/csswg/css2/fonts.html#font-boldness 以了解 CSS 引擎可能在后台执行的操作。）

至于修复，你或多或少已经有了。通过直接选择 td 和 th 元素明确指定字体粗细。

table.a tr {
    font: bold 12pt Arial;
}
table.b td, table.b th {
    font: bold 12pt Arial;
}

 <h2>Boldness Check</h2>

<table class="a">
    <tr>
        <th>TH Column 1</th>
        <td>TD Column 2</td>
        <th>TH Column 3</th>
    </tr>
</table>
<table class="b">
    <tr>
        <th>TH Column 1</th>
        <td>TD Column 2</td>
        <th>TH Column 3</th>
    </tr>
</table>

为什么 THe 比 TD 更大胆，如何避免？

Why are THs bolder than TDs and how to avoid it?

css

fonts

html-table