<th> 文本对齐兼容性答案

【问题标题】：<th> text-align compatibility<th> 文本对齐兼容性
【发布时间】：2012-07-04 00:41:34
【问题描述】：

在表格标题中，th 标签的默认文本对齐方式是居中。

考虑以下代码：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body {
                background-color: aliceblue;
            }
            .default_grid {
                text-align: left;
                width: 600px;
                color: white;
            }
                .default_grid th {
                    /*  text-align: left;  */
                }
                .default_grid .first {
                    background-color: purple;
                }
                .default_grid .second {
                    background-color: orange;
                }
        </style>
    </head>
    <body>
        <table class="default_grid">
            <thead>
                <tr>
                    <th class="first">Test One</th>
                    <th class="second">Test Two</th>
                </tr>
            </thead>
        </table>
    </body>
</html>

在 Firefox、Internet Explorer 7（及更低版本）、Safari、Chrome 和 Opera 中，

中的文本左对齐。而在Internet Explorer 8 和Internet Explorer 9 中，文本居中对齐，除非直接在标记上指定规则（取消注释第 14 行）。

哪一个是正确的行为？

【问题讨论】：

标签： css html html-table

【解决方案1】：

根据 W3C 的Recommendation for TH，

视觉用户代理通常会在单元格内垂直和水平地居中渲染 TH 元素，并使用粗体字体粗细。

没有提到它必须如何表现（？）它是否必须从父级继承样式？

事实是：

默认情况下，所有浏览器都将TH元素中的文本居中对齐。
Internet Explorer 7 及更低版本、Firefox、Chrome、Safari 和 Opera 将 TH 的（仅 †）text-align 属性设置为 inherit 来自父级<thead>、<table>、<body> 等等。
Internet Explorer 8 及更高版本不允许 TH 从父级继承 text-align 属性。您必须通过 CSS 选择器定位 TH 标签才能更改其值。
† 所有浏览器都不会从父级继承 font-weight 属性。您必须通过 CSS 选择器定位 TH 标签才能更改其值。

看这张图片，我们无法概括哪个浏览器做得正确。要么禁止 text-align 和 font-weight 继承值（Internet Explorer 8 及更高版本的方式）或“允许一个而丢弃另一个”（非互联网Explorer 8+ 方式）更好；由供应商自行决定。

作为设计师，一般的经验法则是我们必须选择适用于所有浏览器的做法。在这种情况下，始终以 TH 为目标来更改 text-align 和 font-weight 的值。

【讨论】：

“您必须通过 CSS 选择器来定位 TH 标签才能更改其值”...这很有效。谢谢。

【解决方案2】：

虽然@vulcanraven 的回答在发布时基本上是正确的，但情况已经改变。当前的 HTML 规范 HTML5 描述了“预期呈现”，这不是强制性的，但可以视为隐含推荐，如果浏览器供应商愿意，可以声称符合它。 th 的“预期呈现”规则包括：

“用户代理应该在其用户代理样式表中有一个规则，该规则匹配具有父节点的元素，该父节点的 'text-align' 属性的计算值为其初始值，其声明块仅包含一个将 'text-align' 属性设置为值 'center' 的声明。”

th 元素默认居中是一种相当复杂的说法。（这也很奇怪，因为 CSS 无法以这种方式引用属性的计算值。）但它确实表示只有当父元素（即 tr 元素）没有 @ 987654324@ 设置为不同于 left。

但是，许多现代浏览器未能实现这一点。在 Chrome 和 Firefox 中，单元格是左对齐的。如果您使用没有 CSS 或显示属性的简单表格进行测试并使用开发工具检查它，您会看到 th 单元格居中，但这并未反映在 CSS 中；这些浏览器根据 CSS 规则计算属性（并且没有“预期呈现”中描述的浏览器样式表规则），但如果 text-align 根本没有为 th 设置，它会居中并且 @987654329 @ 显示为center，仿佛来自蓝天。这意味着这些浏览器具有处理“默认居中”的临时规则。 IE 11 似乎实现了“建议渲染”并将此处的单元格显示为居中，但它没有显示这是基于什么 CSS 规则。

【讨论】：

谢谢，这对我有帮助。 {text-align: center;} 突然出现在 <th> 上的相同意外行为也发生在 macOS 上的 Safari 中。