在表格标题中，第 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
哪个是正确的行为？
最佳答案
根据 W3C 的 Recommendation for TH ,
Visual user agents typically render TH elements vertically and horizontally centered within the cell and with a bold font weight.
没有提及它必须如何表现(？)它是否必须从父级继承样式？
事实是:
默认情况下，所有浏览器都将
TH中的文本居中对齐元素。Internet Explorer 7 及更低版本、Firefox、Chrome、Safari 和 Opera 将 TH 的(仅†)text-align 属性设置为继承 来自 parent
<thead>,<table>,<body>等等。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 的值。
关于css - <th> 文本对齐兼容性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11321065/