文本对齐兼容性(<th> text-align compatibility)

在表的标题，为默认的文本对齐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浏览器，浏览器和歌剧在文本<TH>对齐左侧。而在Internet浏览器8和Internet浏览器9 ，文本对准中心，除非该规则被直接指定上<TH>标记（取消注释行＃14）。

哪一个是正确的行为？

Answer 1:

根据W3C的建议为TH ，

可视用户代理典型地呈现TH元件在细胞内，并用粗体字体粗细垂直和水平居中。

没有它必须的行为提（？）是否必须将其从父继承的风格？

事实是：

默认情况下，所有的浏览器中心对齐文本TH元素。
的Internet Explorer 7＆下，Firefox，铬，Safari和Opera设定TH的（仅†）text-align属性从父继承 <thead> <table> <body>等。
Internet Explorer 8中，后来不让TH从父继承text-align属性。你必须通过一个CSS选择器为目标的TH标签来改变它的值。
†所有的浏览器不继承父font-weight属性。你必须通过一个CSS选择器为目标的TH标签来改变它的值。

看到这一幕，我们不能一概而论哪个浏览器是做合适的工作。要么不允许两个文本对齐和字体重量继承值（Internet Explorer 8和后面的方式）或“允许一个和滴其他”（ 非Internet Explorer 8+方式）为佳; 它是在由供应商决定。

作为一个设计师，一个一般的经验法则是，我们必须选择那些对所有的浏览器的做法。在这种情况下，总是目标TH来改变文本对齐和字体权重的值。

Answer 2:

虽然贴的时候@ vulcanraven的回答基本上是正确的，情况发生了变化。目前的HTML规范HTML5介绍“预期渲染”，这不是强制性的，但可以作为被认为隐含建议，以及浏览器厂商可能，如果他们愿意，要求符合它。对于“预期呈现”规则th包括以下内容：

“用户代理预期具有在他们的用户代理样式表具有对‘文本对齐’，其计算值的父节点th元素相匹配的规则性是它的初始值，其声明块由只是一个单一的声明，其设定的在“文本对齐”属性值“中心”“。

这是说的一个相当复杂的方式th元素是默认居中。（这也是奇怪，因为CSS没有参照计算值的属性，这样的方法。）但它确实说，这种预期如果父，即仅适用tr元素，没有text-align一套从不同left 。

然而，许多现代的浏览器无法实现这一点。在Chrome和Firefox，细胞左对齐。如果您有没有CSS或表现属性的简单表测试和使用开发工具检查它，你可以看到， th细胞中心，但这个并没有反映在CSS; 这些浏览器计算的属性按照CSS规则（以及在“预期渲染”描述不具有浏览器的样式表规则），但如果text-align没有设置在所有的th ，它的中心和text-align是示出为center ，从蓝天仿佛。这意味着，这些浏览器都以“默认中心”处理临时规则。 IE 11似乎落实“建议渲染”，在这里显示了细胞为中心，但它并没有显示什么CSS规则，这是基于。

文章来源: text-align compatibility