Question

编辑2015年6月14日 - 从这个问题，我了解到“更大胆”和“更轻”是相对的。我之前提到的来源说“更大胆”是一种绝对的衡量标准，意味着“更加大胆”。我现在改变了这个源:)（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）的小提琴，然后使用Chrome for Windows。请注意IE在标准模式下运行。

我不理解表A和表B中TH的不同行为。当我使用font-weight：bold来设置TR样式时，TH会变得更大胆。当我直接设置TH的样式时，TD和TH的重量相同。

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

Answer 1

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

使用表格B，您明确说明<th>和<td>样式应该会发生什么，因此它们看起来一样。在最新的IE中：

enter image description here

另请注意，严格来说，border-collapse与此问题无关，正如一些答案所暗示的那样。它通过更改<tr>元素的样式语义来“解决”问题。相反，这实际上纯粹是“如果你想要将元素设置为相同的元素，为这些元素指定CSS，而不仅仅是他们的父母”;如果您有嵌套的div，您将不会注意到这是一个问题，但如果您嵌套了不同的元素，您可能会碰到这个，并且您的示例是一个实际案例的完美演示者的事项。

Answer 2

我在Firefox和Internet Explorer（最新版本）中检查了您的代码段，实际上，两个浏览器如何呈现th元素的大胆有所不同。

我能提供的最好的解释是CSS规范没有说明如何计算th元素的字体权重，所以如何做到这一点取决于浏览器。

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

在表A的情况下，font-weight应用于父元素，即包含表格单元格的tr。对于Firefox，CSS引擎继承tr的值，即bold，并获得一致的字体权重。

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

您在这里看到的是跨浏览器的差异，因为软件设计工程师在没有明确的指导原则的情况下决定解释CSS规范。

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

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

＆＃13;

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

＆＃13;

 <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>

＆＃13;

Answer 3

您正在尝试设置<TR>标记的样式。为了在浏览器中始终如一地执行此操作，您需要将表格border-collapse属性设置为collapse。

table {
  border-collapse: collapse;
}

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

请注意，默认情况下<TH>代码的样式为粗体，这就是为什么您将<TH>设为粗体，而<TD>正常，当您尝试设置{{1}样式时}。

为什么TH比TD更大胆以及如何避免？

3 个答案: