文本对齐：向左并开始以从左到右的方向表现不同

Question

文本对齐：向左并开始以从左到右的方向表现不同

给定以下包含表格的 HTML 文档：

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <style>
      body {
        /* text-align: left; */
      }
      th, td {
        border: 1px solid black;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Row 1 Column 1</th>
        <th>Row 1 Column 2</th>
      </tr>
      <tr>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
      </tr>
    </table>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

这将显示一个 2x2 的表格，其中第一行的内容居中，第二行的内容左对齐。这是由于用户代理样式表在 chrome 上设置了text-align: -internal-center;元素th，并且没有为td-elements 设置对齐方式，因此这些样式表使用默认的左对齐方式。

如果我们取消上面代码片段中元素text-align: left;样式的注释，则 -elements 将从 -element 继承此样式，并且表格的所有内容都将左对齐。bodythbody

但是，如果我们将其更改为text-align: start;，第一行将再次居中。怎么可能？根据MDN ，如果方向是（从左到右），则值start和应该表现相同，自从我们放置元素以来就是这种情况。leftltrdir="ltr"html

使用text-align: end或right两者将内容向右移动，而使用left则将内容向左移动。唯一不起作用的值是start.

我在 MacOS 上的 Firefox 和 Chrome 上都看到了这种行为。

请注意，我并不是在寻求解决方法，而是想了解为什么会发生这种情况！

Answer 1

Tim*_*m R 2

来源：W3C > HTML5 > 渲染 > CSS 用户代理样式表和表示提示 >对齐（本节最后一段）：

用户代理应该在其用户代理样式表中包含一条规则，该th规则与具有父节点的元素相匹配，该父节点的“text-align”属性的计算值是其初始值，其声明块仅包含一个设置“text-align”的声明。 text-align' 属性设置为值 'center'。

换句话说，th只有当其父级的默认值未更改时，用户代理才应居中。text-align: start是当前浏览器中的默认值，因此th居中。

我能够得出这个结论要归功于2011年<th>文本对齐兼容性中发布的一个问题和第二个答案

归档时间：	2 年，4 月前
查看次数：	150 次
最近记录：	2 年，4 月前