Question

在IE，Edge和Safari中，<th>的{{1}}后代是居中对齐的。

在Chrome，Firefox和Opera中，它左对齐。

根据W3C Rendering建议（我的斜体）：

用户代理应在其用户代理样式表中包含规则匹配具有父节点计算值的 th 元素对于＆＃39; text-align＆＃39; property是它的初始值，的声明 block只包含一个声明，用于设置＆＃39; text-align＆＃39; 物业价值＆＃39;中心＆＃39;。

斜体部分指出，如果<li>元素的父级<th>属性未被更改，则text-align元素应居中。

Chrome，Firefox和Opera中<th>的{{1}}后代不是这种情况。假设他们忽略了W3C建议，我是否正确？

（使用<li>可轻松解决问题，因此我不需要解决方案。）

修改

我已经收到了一些关于这种行为的好解释，但答案并不令人满意 - 不是海报的错误。

我认为W3C的目的是th {text-align: center;}元素应该以为中心，除非它们包含或继承了不同的显式 <th>样式。由于隐式样式的复杂级联继承，text-align元素应该左对齐是没有意义的。

它似乎取决于W3C的含义＆＃34;它的初始值＆＃34;在报价中。＆＃34;初始值＆＃34; <th> <li>属性的text-align属性match-parent，显然与text-align: initial不同。

希望W3C将来能够澄清这一点。与此同时，th {text-align: center;}解决了这个问题。

示例：

＆＃13;

th, td {
  border: 1px solid #ddd;
}

＆＃13;

<ol>
  <li>
    <table>
      <tr>
        <th>This is a Lorem Ipsum<br>test</th>
        <th>Another header
      </tr>
      <tr>
        <td>ABCDEFG HIJKLMNOP QRSTUV WXYZ
        <td>More
      </tr>
    </table>
  </li>
</ol>

＆＃13;

Answer 1

您的问题是li默认为text-align: match-parent（至少在Firefox上），这意味着li为text-align:left（如果方向为ltr否则为text-align:right）因此，如果您将li更改为text-align:initial，th将按预期工作

<强>匹配父

与继承相似，但值的开始和结束是根据父母的方向计算的，并被替换为   足够的左或右值。

＆＃13;

th,
td {
  border: 1px solid #ddd;
}
li {
  text-align: initial
}

＆＃13;

<ol>
  <li>
    <table>
      <tr>
        <th>This is a Lorem Ipsum
          <br>test</th>
        <th>Another header
      </tr>
      <tr>
        <td>ABCDEFG HIJKLMNOP QRSTUV WXYZ
          <td>More
      </tr>
    </table>
  </li>
</ol>

＆＃13;

Answer 2

不，他们不会忽视W3C。根据你问题中的引用，

父节点，其计算值为＆＃39; text-align＆＃39; property是它的初始值

但事实并非如此。 text-align的初始值为start，计算为start。但<li>元素的样式为text-align: match-parent，由于left具有<ol>，因此会计算direction: ltr。即使start的行为与left相同，因为<li>也有direction: ltr，但它们的值不同。这就是th不居中的原因。

请注意start和match-parent是最近添加的内容。可能th会集中在尚不支持它们的浏览器上。

如果您使用li { text-align: initial; }，那么th就会居中。

＆＃13;

th, td {
  border: 1px solid #ddd;
}
li {
  text-align: initial;
}

＆＃13;

<ol>
  <li>
    <table>
      <tr>
        <th>This is a Lorem Ipsum<br>test</th>
        <th>Another header
      </tr>
      <tr>
        <td>ABCDEFG HIJKLMNOP QRSTUV WXYZ
        <td>More
      </tr>
    </table>
  </li>
</ol>

＆＃13;

<li>文字对齐不一致

修改

2 个答案: