Fatal编程技术网
  • html/
  • Html Google Chrome中th的默认文本对齐 问题

Html Google Chrome中th的默认文本对齐 问题

html css google-chrome

Html Google Chrome中th的默认文本对齐 问题,html,css,google-chrome,Html,Css,Google Chrome,当文本对齐：居中时，为什么th元素的文本居中 系统设置 MacBook Pro，2014年年中 OS X v 10.10.2 谷歌浏览器V40.0.2214.94（64位） 所有软件均为本次发布时的最新版本 示例代码 以表格标题为中心的文本 表数据左对齐文本 屏幕快照 HTML呈现： 第一个th元素上的开发工具： 我在这里看不到文本对齐：居中，但很明显，th中的文本是居中对齐的。这是一个Chrome bug吗 相关问题 使现代化 从Chrome v67开始，th现在有一个指定的文本

当
文本对齐：居中时，为什么
th
元素的文本居中

系统设置

    

  • MacBook Pro，2014年年中
    • 

  • OS X v 10.10.2
    • 

  • 谷歌浏览器V40.0.2214.94（64位）
    • 

  • 所有软件均为本次发布时的最新版本
    • 


示例代码


以表格标题为中心的文本
表数据左对齐文本


屏幕快照
HTML呈现：


第一个
th
元素上的开发工具：


我在这里看不到
文本对齐：居中，但很明显，
th
中的文本是居中对齐的。这是一个Chrome bug吗

相关问题


使现代化

从Chrome v67开始，
th
现在有一个指定的
文本对齐：-内部中心浏览器。
我现在发布了对上述问题的新答案。我希望它能澄清这种情况，但由于这个问题实际上不是一个重复的问题，而是一个关于浏览器行为的特定问题，我在这里包括相关的一点：

Chrome（和Firefox）以特殊的方式实现
th
元素，这与任何规范都不一致，包括HTML5中的“建议呈现”，尽管它通常会导致相同的结果。实际上，
th
没有浏览器默认的样式表规则，但是当应用了正常的CSS级联，并且没有为
th
的
text align
生成任何值时，就会神奇地将值
center
分配给它（而不是根据规范指定的
left
的初始值）。这可能是CSS之前的旧时代遗留下来的，当时
th
只是简单地以中心为中心


如果您在dev tools“Computeted”选项卡中检查没有CSS设置的表中的
th
元素，则即使内容实际居中，也不会显示
文本对齐的值。如果您选中“显示继承属性”（这意味着比名称所说的更多），您可以看到
text align:center
我现在发布了一个新的答案。我希望它能澄清这种情况，但由于这个问题实际上不是一个重复的问题，而是一个关于浏览器行为的特定问题，我在这里包括相关的一点：

Chrome（和Firefox）以特殊的方式实现
th
元素，这与任何规范都不一致，包括HTML5中的“建议呈现”，尽管它通常会导致相同的结果。实际上，
th
没有浏览器默认的样式表规则，但是当应用了正常的CSS级联，并且没有为
th
的
text align
生成任何值时，就会神奇地将值
center
分配给它（而不是根据规范指定的
left
的初始值）。这可能是CSS之前的旧时代遗留下来的，当时
th
只是简单地以中心为中心


如果您在dev tools“Computeted”选项卡中检查没有CSS设置的表中的
th
元素，则即使内容实际居中，也不会显示
文本对齐的值。如果您选中“Show inherited properties”（这意味着比名称所说的更多），您可以看到
text align:center
，我猜
在默认情况下是这样显示的，因为（据我所知）根据HTML规范，它不需要任何其他内容。编辑：事实上，建议
的默认样式应该是
{font-weight:bold；text-align:center}
我知道。我不知道Google Chrome是如何在没有
text align:center的情况下以这种方式呈现的。但是我确实看到了
font-weight:bold，如我的屏幕截图所示。我猜默认情况下，
是这样显示的，因为（据我所知）根据HTML规范，它不需要任何其他内容。编辑：事实上，建议
的默认样式应该是
{font-weight:bold；text-align:center}
我知道。我不知道Google Chrome是如何在没有
text align:center的情况下以这种方式呈现的。但是我确实看到了
font-weight:bold，如我的屏幕截图所示。这似乎是一种非常奇怪的方式。为什么Chrome不能像使用
标题
元素那样使用普通的CSS呢？（
text-align:-webkit-center；
）Chrome并不是唯一的；Firefox也做同样的事情。这似乎是一种非常奇怪的方式。为什么Chrome不能像使用
标题
元素那样使用普通的CSS呢？（
text-align:-webkit-center；
）Chrome并不是唯一的；Firefox也做同样的事情。

<!-- no external or internal CSS applied.
     browser default styles only. -->
<table width="500" border="1"> <!-- attributes for debugging only. never use these attributes in real code (use CSS instead). -->
    <tr><th> table heading </th><th> centered text     </th></tr>
    <tr><td> table data    </td><td> left-aligned text </td></tr>
</table>