6

在表格标题中，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中，<th> 中的文本左对齐。在Internet Explorer 8和Internet Explorer 9中，文本居中对齐，除非直接在 <th> 标记上指定规则（取消注释第 14 行）。

哪一个是正确的行为？

4

2 回答 2

18
于 2012-07-04T02:32:47.487 回答
3

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

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

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

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

于 2015-02-03T19:52:11.313 回答