gpt4 book ai didi

css - 文本对齐兼容性

转载 作者:太空狗 更新时间:2023-10-29 14:41:54 25 4
gpt4 key购买 nike

在表格标题中,第 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 中的文本左对齐。而在 Internet Explorer 8Internet Explorer 9 , 除非在 标记上直接指定规则(取消注释行 # 14),否则文本居中对齐。

哪个是正确的行为?

最佳答案

根据 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-alignfont-weight 继承值(Internet Explorer 8 及更高版本的方式),要么“允许一个并丢弃另一个”(非 Internet Explorer 8+ 方式)更好;由供应商自行决定。

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

关于css - <th> 文本对齐兼容性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11321065/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com