< th& gt;文字对齐兼容性 [英] &lt;th&gt; text-align compatibility
问题描述
在表标题中，第 th 标签的默认文本对齐方式是居中.
In a table heading, the default text alignment for the th tag is center.
考虑以下代码:
<!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和歌剧< th>中的文本左对齐.在 Internet Explorer 8 和
In Firefox, Internet Explorer 7 (& lower), Safari, Chrome and Opera the text in <th> is aligned left. While in Internet Explorer 8 and Internet Explorer 9, the text is aligned center unless the rule is specified directly on <th> tag (uncomment line# 14).
哪个是正确的行为?
推荐答案
根据W3C的推荐TH ，
视觉用户代理通常在单元格内垂直和水平地居中并以粗体字体粗细呈现TH元素.
Visual user agents typically render TH elements vertically and horizontally centered within the cell and with a bold font weight.
没有提及它必须的行为(?)是否必须从父项继承样式?
There is no mentioning of how it must behave(?) Whether or not must it inherit style from the parent?
事实是:
-
默认情况下，所有浏览器在
TH元素中居中对齐文本.
Internet Explorer 7&较低，Firefox，Chrome，Safari和Opera将父项的(仅†)文本对齐属性从父设置为继承< thead> ，< table> ，< body> 等.
Internet Explorer 7 & lower, Firefox, Chrome, Safari and Opera set the (only †) text-align property of TH to inherit from the parent <thead>, <table>, <body> and so on.
Internet Explorer 8 和更高版本不允许TH继承父对象的 text-align 属性.您必须通过CSS选择器定位TH标签以更改其值.
Internet Explorer 8 and later doesn't let the TH to inherit text-align property from parent. You have to target the TH tag via a CSS selector to change its value.
†所有浏览器都不从父项继承 font-weight 属性.您必须通过CSS选择器定位TH标签以更改其值.
† All browsers don't inherit the font-weight property from parent. You have to target the TH tag via a CSS selector to change its value.
看这张照片，我们无法概括出哪个浏览器在做正确的工作.要么禁止 text-align 和 font-weight 继承值(Internet Explorer 8或更高版本)，要么允许一个并丢弃另一个"( non-Internet Explorer 8 + 的方式更好)；由供应商决定.
Looking at this picture, we can't generalize which browser is doing the right job. Either disallowing both text-align and font-weight to inherit value (Internet Explorer 8 and later way) or "allowing one and dropping other" (non-Internet Explorer 8+ way) is better; it's on the vendor's discretion.
作为设计师，一般的经验法则是我们必须选择适用于所有浏览器的实践.在这种情况下，请始终以TH为目标以更改 text-align 和 font-weight 的值.
Being a designer, a general rule of thumb is we must choose those practices which work for all browsers. In this case, always target TH to change the value of text-align and font-weight.
这篇关于< th& gt;文字对齐兼容性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
