问题描述
在表格标题中， th 标签的默认文本对齐方式为center。
请考虑以下事项code：
<！DOCTYPE html>
< html>
< head>
< style type =text / css>
body {
background-color：aliceblue;
}
.default_grid {
text-align：left;
width：600px;
颜色：白色;
}
.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中，（& lower），Safari，Chrome和，将< th>中的文本左对齐。在和，除非直接在< th>标签上指定规则（取消注释行＃14），否则文本将居中对齐。
哪一个是正确的行为？ 根据W3C的，
没有提及必须的行为（？）是否必须从父项继承样式？
事实是： l浏览器在
TH 元素中对齐文本。 Internet Explorer 7&更低，Firefox，Chrome，Safari和Opera将TH的 文本对齐属性设置为继承 $ c> ，< table> ，< body> 等等。
看这张图片，我们可以概括说明哪个浏览器正在做正确的工作。禁止 text-align 和 font-weight 继承值（Internet Explorer 8及更高版本）或允许一个并删除其他（ non -Internet Explorer 8 +方式）更好;这是由供应商自行决定的。
作为设计师，一般的经验法则是我们必须选择适用于所有浏览器的实践。在这种情况下，请始终指定TH来更改 text-align 和 font-weight 的值。
In a table heading, the default text alignment for the th tag is center.
Consider the following code:
<!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>
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).
Which one is the correct behavior?
According to W3C's Recommendation for TH,
There is no mentioning of how it must behave(?) Whether or not must it inherit style from the parent?
Facts are:
By default all browsers center align text in
THelement.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 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.
† 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.
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.
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.
这篇关于<的第i;文本对齐兼容性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！