html - Google Chrome 中的默认文本对齐方式

Question

问题

当浏览器默认未指定 text-align: center; 时，为什么第 th 元素的文本居中？

系统设置

• MacBook Pro，2014 年中期
• OS X 版本 10.10.2
• Google Chrome 浏览器 v 40.0.2214.94(64 位)
• 截至本文发布时所有软件都是最新的

示例代码

<!-- no external or internal CSS applied.
     browser default styles only. -->
<table width="500" border="1"> <!-- attributes for debugging only. never use these attributes in real code (use CSS instead). -->
    <tr><th> table heading </th><th> centered text     </th></tr>
    <tr><td> table data    </td><td> left-aligned text </td></tr>
</table>

屏幕截图

HTML 渲染:

第一个th元素上的开发工具:

我在这里没有看到text-align: center;，但显然th中的文本是居中对齐的。这是 Chrome 的错误吗？

相关问题

<th> text-align compatibility

更新

从 Chrome v67 开始，th 现在默认具有指定的 text-align: -internal-center;。

Answer 1

我现在已经发布了对 old question 的新答案提及。我希望它能澄清情况，但由于这个问题实际上并不是重复的，而是有关浏览器行为的特定问题，因此我在此处添加了相关要点:

Chrome(和 Firefox)实现 th元素以特殊的方式呈现，这与任何规范都不一致，包括 HTML5 中的“建议渲染”，尽管它经常会导致相同的结果。实际上，th 没有浏览器默认样式表规则。 ，但是当应用正常的 CSS 级联时，它不会产生 text-align 的任何值。对于 th ，然后神奇地得到值 center分配给它(而不是按照规范的初始值left)。这可能是 CSS 之前的时代的遗留物，当时 th只是居中。

如果您在开发工具的“Computeted”选项卡中检查，会出现 th如果表中的元素没有 CSS 设置，则 text-align 不会显示任何值，即使内容实际上是居中的。如果您选中“显示继承的属性”(这意味着比名称更重要)，您可以看到 text-align: center .