Question

在表格标题中，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（＆amp; lower），Safari，Chrome和Opera中的文字＆lt; th＆gt;向左对齐。在Internet Explorer 8和Internet Explorer 9中，除非直接在＆lt; th＆gt;上指定规则，否则文本将对齐居中。标记（取消注释第14行）。

哪一个是正确的行为？

Answer 1

根据W3C的Recommendation for TH，

可视用户代理通常在单元格中垂直和水平居中呈现TH元素，并使用粗体字体粗细。

没有提及必须的行为（？）是否必须从父级继承样式？

事实是：

默认情况下，所有浏览器都会在TH元素中对齐文字。
Internet Explorer 7＆amp; lower，Firefox，Chrome，Safari和Opera将TH的（仅†） text-align 属性设置为从父{{1>继承 }，<thead>，<table>等等。
Internet Explorer 8以后不允许TH从父级继承 text-align 属性。您必须通过CSS选择器定位TH标签以更改其值。
†所有浏览器都不会从父级继承 font-weight 属性。您必须通过CSS选择器定位TH标签以更改其值。

看一下这张图片，我们无法概括哪个浏览器正在做正确的工作。禁止 text-align 和 font-weight 继承值（Internet Explorer 8及更高版本）或“允许其他人删除其他”（非Internet Explorer 8 + 方式）更好;这是由供应商自行决定的。

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

Answer 2

尽管@ vulcanraven的回答在发布时基本上是正确的，但情况已经发生了变化。当前的HTML规范HTML5描述了“预期呈现”，这不是强制性的，但可以被视为隐式推荐，并且浏览器供应商可以根据需要声明对其的一致性。 th的“预期呈现”规则包括以下内容：

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

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

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

文本对齐兼容性

2 个答案: